@mixin toggle($type: 'radio') {
  $self: #{&};
  $icon: #{$self}__icon;
  $label: #{$self}__label;
  $content: #{$self}__content;

  $icon-size: 24px;
  $padding: 3px 0;

  @at-root {

    #{$self} {
      display: inline-block;
      position: relative;
      line-height: 1;
      @include no-select();

      &:hover,
      &:focus {
        #{$icon} {
          box-shadow: 0 0 0 8px rgba(#000, 0.1);
          background: rgba(#000, 0.1);
        }
      }

      &:active {
        #{$icon} {
          box-shadow: 0 0 0 0 rgba($color-enabled, 0.1);
          background: rgba($color-enabled, 0.1);

          @if $type == 'checkbox' {
            border-radius: 3px;
          }
        }
      }

      input {
        &:not(:checked),
        &:checked {
          display: none;
          opacity: 0;
        }
      }

      &.is-active {
        #{$icon} {
          color: $color-enabled;
        }
      }
    }

    #{$icon} {
      display: inline-block;
      color: $g-font-color;
      font-size: $icon-size;
      border-radius: 50%;
      box-shadow: 0 0 0 0 rgba(#000, 0);
      transition: box-shadow 0.09s nth($g-transition, 2),
      border-radius 0.09s nth($g-transition, 2);
    }

    #{$label} {
      position: relative;
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: flex-start;
      padding: $padding;
      margin: 0;
      line-height: 1;
      cursor: pointer;
    }

    #{$content} {
      display: block;
      margin-left: 10px;
      margin-top: 4px;
    }

  }
}

.c-checkbox {
  @include toggle('checkbox')
}

.c-radio {
  @include toggle('radio')
}