light.css

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.button-bar {
  display: table;
  table-layout: fixed;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

.button-bar__item {
  display: table-cell;
  width: auto;
  border-radius: 0;
}

.button-bar__item > input {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.button-bar__button {
  border-radius: inherit;
}

.button-bar__item:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.button,
.topcoat-button,
.topcoat-button--quiet,
.topcoat-button--large,
.topcoat-button--large--quiet,
.topcoat-button--cta,
.topcoat-button--large--cta,
.topcoat-button-bar__button,
.topcoat-button-bar__button--large {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

.button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.button--disabled,
.topcoat-button:disabled,
.topcoat-button--quiet:disabled,
.topcoat-button--large:disabled,
.topcoat-button--large--quiet:disabled,
.topcoat-button--cta:disabled,
.topcoat-button--large--cta:disabled,
.topcoat-button-bar__button:disabled,
.topcoat-button-bar__button--large:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.topcoat-button,
.topcoat-button--quiet,
.topcoat-button--large,
.topcoat-button--large--quiet,
.topcoat-button--cta,
.topcoat-button--large--cta,
.topcoat-button-bar__button,
.topcoat-button-bar__button--large {
  padding: 0 0.563rem;
  font-size: 12px;
  line-height: 1.313rem;
  letter-spacing: 0;
  color: #454545;
  text-shadow: 0 1px #fff;
  vertical-align: top;
  background-color: #e5e9e8;
  box-shadow: inset 0 1px #fff;
  border: 1px solid #9daca9;
  border-radius: 4px;
}

.topcoat-button:hover,
.topcoat-button--quiet:hover,
.topcoat-button--large:hover,
.topcoat-button--large--quiet:hover,
.topcoat-button-bar__button:hover,
.topcoat-button-bar__button--large:hover {
  background-color: #eff1f1;
}

.topcoat-button:focus,
.topcoat-button--quiet:focus,
.topcoat-button--quiet:hover:focus,
.topcoat-button--large:focus,
.topcoat-button--large--quiet:focus,
.topcoat-button--large--quiet:hover:focus,
.topcoat-button--cta:focus,
.topcoat-button--large--cta:focus,
.topcoat-button-bar__button:focus,
.topcoat-button-bar__button--large:focus {
  border: 1px solid #0036ff;
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
  outline: 0;
}

.topcoat-button:active,
.topcoat-button--large:active,
.topcoat-button-bar__button:active,
.topcoat-button-bar__button--large:active,
:checked + .topcoat-button-bar__button {
  border: 1px solid #9daca9;
  background-color: #d2d6d6;
  box-shadow: inset 0 1px rgba(0,0,0,0.1);
}

.topcoat-button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.topcoat-button--quiet:hover,
.topcoat-button--large--quiet:hover {
  text-shadow: 0 1px #fff;
  border: 1px solid #9daca9;
  box-shadow: inset 0 1px #fff;
}

.topcoat-button--quiet:active,
.topcoat-button--quiet:focus:active,
.topcoat-button--large--quiet:active,
.topcoat-button--large--quiet:focus:active {
  color: #454545;
  text-shadow: 0 1px #fff;
  background-color: #d2d6d6;
  border: 1px solid #9daca9;
  box-shadow: inset 0 1px rgba(0,0,0,0.1);
}

.topcoat-button--large,
.topcoat-button--large--quiet,
.topcoat-button-bar__button--large {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.688rem;
  padding: 0 0.875rem;
}

.topcoat-button--large--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.topcoat-button--cta,
.topcoat-button--large--cta {
  border: 1px solid #134f7f;
  background-color: #288edf;
  box-shadow: inset 0 1px rgba(255,255,255,0.36);
  color: #fff;
  font-weight: 500;
  text-shadow: 0 -1px rgba(0,0,0,0.36);
}

.topcoat-button--cta:hover,
.topcoat-button--large--cta:hover {
  background-color: #4ca1e4;
}

.topcoat-button--cta:active,
.topcoat-button--large--cta:active {
  background-color: #1e7dc8;
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
}

.topcoat-button--large--cta {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.688rem;
  padding: 0 0.875rem;
}

.button-bar,
.topcoat-button-bar {
  display: table;
  table-layout: fixed;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

.button-bar__item,
.topcoat-button-bar__item {
  display: table-cell;
  width: auto;
  border-radius: 0;
}

.button-bar__item > input,
.topcoat-button-bar__item > input {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.button-bar__button {
  border-radius: inherit;
}

.button-bar__item:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* topdoc
  name: Button Bar
  description: Component of grouped buttons
  modifiers:
    :disabled: Disabled state
  markup:
    <div class="topcoat-button-bar">
      <div class="topcoat-button-bar__item">
        <button class="topcoat-button-bar__button">One</button>
      </div>
      <div class="topcoat-button-bar__item">
        <button class="topcoat-button-bar__button">Two</button>
      </div>
      <div class="topcoat-button-bar__item">
        <button class="topcoat-button-bar__button">Three</button>
      </div>
    </div>
  examples:
    mobile button bar: http://codepen.io/Topcoat/pen/kdKyg
  tags:
    - desktop
    - light
    - dark
    - mobile
    - button
    - group
    - bar
*/

.topcoat-button-bar > .topcoat-button-bar__item:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.topcoat-button-bar > .topcoat-button-bar__item:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.topcoat-button-bar__item:first-child > .topcoat-button-bar__button,
.topcoat-button-bar__item:first-child > .topcoat-button-bar__button--large {
  border-right: none;
}

.topcoat-button-bar__item:last-child > .topcoat-button-bar__button,
.topcoat-button-bar__item:last-child > .topcoat-button-bar__button--large {
  border-left: none;
}

.topcoat-button-bar__button {
  border-radius: inherit;
}

.topcoat-button-bar__button:focus,
.topcoat-button-bar__button--large:focus {
  z-index: 1;
}

/* topdoc
  name: Large Button Bar
  description: A button bar, only larger
  modifiers:
    :disabled: Disabled state
  markup:
    <div class="topcoat-button-bar">
      <div class="topcoat-button-bar__item">
        <button class="topcoat-button-bar__button--large">One</button>
      </div>
      <div class="topcoat-button-bar__item">
        <button class="topcoat-button-bar__button--large">Two</button>
      </div>
      <div class="topcoat-button-bar__item">
        <button class="topcoat-button-bar__button--large">Three</button>
      </div>
    </div>
  tags:
    - desktop
    - light
    - dark
    - mobile
    - button
    - group
    - bar
    - large
*/

.topcoat-button-bar__button--large {
  border-radius: inherit;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

.button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.button--disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.button,
.topcoat-button,
.topcoat-button--quiet,
.topcoat-button--large,
.topcoat-button--large--quiet,
.topcoat-button--cta,
.topcoat-button--large--cta {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

.button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.button--disabled,
.topcoat-button:disabled,
.topcoat-button--quiet:disabled,
.topcoat-button--large:disabled,
.topcoat-button--large--quiet:disabled,
.topcoat-button--cta:disabled,
.topcoat-button--large--cta:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* topdoc
  name: Button
  description: A simple button
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <button class="topcoat-button">Button</button>
    <button class="topcoat-button" disabled>Button</button>
  examples:
    mobile button: http://codepen.io/Topcoat/pen/DpKtf
  tags:
    - desktop
    - light
    - mobile
    - button
*/

.topcoat-button,
.topcoat-button--quiet,
.topcoat-button--large,
.topcoat-button--large--quiet,
.topcoat-button--cta,
.topcoat-button--large--cta {
  padding: 0 0.563rem;
  font-size: 12px;
  line-height: 1.313rem;
  letter-spacing: 0;
  color: #454545;
  text-shadow: 0 1px #fff;
  vertical-align: top;
  background-color: #e5e9e8;
  box-shadow: inset 0 1px #fff;
  border: 1px solid #9daca9;
  border-radius: 4px;
}

.topcoat-button:hover,
.topcoat-button--quiet:hover,
.topcoat-button--large:hover,
.topcoat-button--large--quiet:hover {
  background-color: #eff1f1;
}

.topcoat-button:focus,
.topcoat-button--quiet:focus,
.topcoat-button--quiet:hover:focus,
.topcoat-button--large:focus,
.topcoat-button--large--quiet:focus,
.topcoat-button--large--quiet:hover:focus,
.topcoat-button--cta:focus,
.topcoat-button--large--cta:focus {
  border: 1px solid #0036ff;
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
  outline: 0;
}

.topcoat-button:active,
.topcoat-button--large:active {
  border: 1px solid #9daca9;
  background-color: #d2d6d6;
  box-shadow: inset 0 1px rgba(0,0,0,0.1);
}

/* topdoc
  name: Quiet Button
  description: A simple, yet quiet button
  modifiers:
    :active: Quiet button active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <button class="topcoat-button--quiet">Button</button>
    <button class="topcoat-button--quiet" disabled>Button</button>
  tags:
    - desktop
    - light
    - mobile
    - button
    - quiet
*/

.topcoat-button--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.topcoat-button--quiet:hover,
.topcoat-button--large--quiet:hover {
  text-shadow: 0 1px #fff;
  border: 1px solid #9daca9;
  box-shadow: inset 0 1px #fff;
}

.topcoat-button--quiet:active,
.topcoat-button--quiet:focus:active,
.topcoat-button--large--quiet:active,
.topcoat-button--large--quiet:focus:active {
  color: #454545;
  text-shadow: 0 1px #fff;
  background-color: #d2d6d6;
  border: 1px solid #9daca9;
  box-shadow: inset 0 1px rgba(0,0,0,0.1);
}

/* topdoc
  name: Large Button
  description: A big ol button
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <button class="topcoat-button--large" >Button</button>
    <button class="topcoat-button--large" disabled>Button</button>
  tags:
    - desktop
    - light
    - mobile
    - button
    - large
*/

.topcoat-button--large,
.topcoat-button--large--quiet {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.688rem;
  padding: 0 0.875rem;
}

/* topdoc
  name: Large Quiet Button
  description: A large, yet quiet button
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <button class="topcoat-button--large--quiet" >Button</button>
    <button class="topcoat-button--large--quiet" disabled>Button</button>
  tags:
    - desktop
    - light
    - mobile
    - button
    - large
    - quiet
*/

.topcoat-button--large--quiet {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

/* topdoc
  name: Call To Action Button
  description: A CALL TO ARMS, er, ACTION!
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <button class="topcoat-button--cta" >Button</button>
    <button class="topcoat-button--cta" disabled>Button</button>
  tags:
    - desktop
    - light
    - mobile
    - button
    - call to action
*/

.topcoat-button--cta,
.topcoat-button--large--cta {
  border: 1px solid #134f7f;
  background-color: #288edf;
  box-shadow: inset 0 1px rgba(255,255,255,0.36);
  color: #fff;
  font-weight: 500;
  text-shadow: 0 -1px rgba(0,0,0,0.36);
}

.topcoat-button--cta:hover,
.topcoat-button--large--cta:hover {
  background-color: #4ca1e4;
}

.topcoat-button--cta:active,
.topcoat-button--large--cta:active {
  background-color: #1e7dc8;
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
}

/* topdoc
  name: Large Call To Action Button
  description: Like call to action, but bigger
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <button class="topcoat-button--large--cta" >Button</button>
    <button class="topcoat-button--large--cta" disabled>Button</button>
  tags:
    - desktop
    - light
    - mobile
    - button
    - large
    - call to action
*/

.topcoat-button--large--cta {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.688rem;
  padding: 0 0.875rem;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

input[type="checkbox"] {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.checkbox {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox__label {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox--disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.checkbox:before,
.checkbox:after {
  content: '';
  position: absolute;
}

.checkbox:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

input[type="checkbox"] {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
}

.checkbox,
.topcoat-checkbox__checkmark {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox__label,
.topcoat-checkbox {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox--disabled,
input[type="checkbox"]:disabled + .topcoat-checkbox__checkmark {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.checkbox:before,
.checkbox:after,
.topcoat-checkbox__checkmark:before,
.topcoat-checkbox__checkmark:after {
  content: '';
  position: absolute;
}

.checkbox:before,
.topcoat-checkbox__checkmark:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

/* topdoc
  name: Checkbox
  description: Default skin for Topcoat checkbox
  modifiers:
    :focus: Focus state
    :disabled: Disabled state
  markup:
    <label class="topcoat-checkbox">
      <input type="checkbox">
      <div class="topcoat-checkbox__checkmark"></div>
      Default
    </label>
    <br>
    <br>
    <label class="topcoat-checkbox">
      <input type="checkbox" disabled>
      <div class="topcoat-checkbox__checkmark"></div>
      Disabled
    </label>
  examples: