.selector
{
  /* the common selector */
}

.container
{
  display: inline-block;
}

.wrapper
{
  position: relative;

  color: black;

  font: inherit;
}

.control
{
  position: relative;

  display: inline-block;

  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-decoration: none;

  border: 1px solid #ccc;
  outline: none;
  background: white;

  -webkit-tap-highlight-color: transparent;
}

.control::-moz-focus-inner
{
  margin: 0;
  padding: 0;

  border: 0;
}

.control:hover
{
  border: 1px solid #b3b3b3;
}

.native
{
  position: absolute;

  margin: 0;

  opacity: 0;
  border: 0;
  outline: 0;
}

.native:focus + .control
{
  border: 1px solid #ffdb4d;
  box-shadow: inset 0 0 0 1px #ffdb4d;
}

.native:disabled + .control
{
  cursor: default;

  border: 1px solid #ebebeb;
  background: #ebebeb;
}

/* theme: `common` */

.common-wrapper
{
  composes: wrapper;

  display: block;

  line-height: 1.2;
}

.common-control
{
  composes: control;

  top: 1px;

  box-sizing: border-box;

  transition: background .1s ease-out,border .1s ease-out,box-shadow .1s ease-out;

  border-radius: 50%;
}

.common-control:before
{
  visibility: hidden;

  content: '\00A0';
}

.common-control:after
{
  position: absolute;

  visibility: hidden;

  content: '';

  opacity: 0;
  border-radius: 50%;
  background: black;
}

.common-control:active
{
  background: #f6f5f3;
}

.common-native
{
  composes: native;
}

.common-native:checked + .control
{
  background: #ffeba0;
}

.common-native:checked + .control:after
{
  visibility: visible;

  opacity: 1;
}

.common-native:disabled:checked + .control
{
  background: #d9d9d9;
}

.common-native:disabled:checked + .control:after
{
  opacity: .5;
}

/* theme: `button` */

.button-wrapper
{
  composes: wrapper;

  display: inline;
}

.button-control
{
  composes: control;

  z-index: 0;

  box-sizing: border-box;
  margin-right: -1px;

  text-align: center;

  color: black;
}

.button-control:hover
{
  z-index: 1;
}

.button-wrapper:first-child .button-control
{
  border-radius: 3px 0 0 3px;
}

.button-wrapper:last-child .button-control
{
  margin-right: 0;

  border-radius: 0 3px 3px 0;
}

.button-native
{
  composes: native;
}

.button-native:focus + .button-control
{
  z-index: 1;
}

.button-native + .button-control:active
{
  background: #f6f5f3;
}

.button-native:checked + .button-control
{
  position: relative;

  background: #ffeca6;
}

.button-native:checked + .button-control:active
{
  background: #fee481;
}

.button-native:disabled + .button-control
{
  z-index: 0;

  border: 1px solid transparent;
  background: #ebebeb;
}

.button-native:disabled:checked + .button-control
{
  background: #d9d9d9;
}