%outline-none { outline: 0 }
%line-height-default { line-height: 1 }
%font-size-normal { font-size: $font-size-normal }
%color-brand-darker { color: $color-brand-darker }
%z-index-active { z-index: 1 }

.tao__radio-group {
  font-size: 0;
  &--break {
    @include device-size(small) {
      flex-direction: column;
      > .tao__radio-button {
        margin: $spacing-margin-xxsmall 0;
        &.is-bordered {
          margin: $spacing-margin-xxsmall 0;
        }
        &:first-child, &:last-child, & {
          border-radius: $border-radius-normal;
        }
      }
    }
  }
}

.tao__radio-label {
  margin-left: $border-radius-default / 2;
  letter-spacing: .2px;
  @extend %font-size-normal;
}

.tao__radio-button {
  @extend %font-size-normal;
  min-height: 40px;
  z-index: 0;
  margin: {
    left:  -1px;
    right: -1px;
  }
  transition: border-color $transition-sm-medium $transition-easing-default,
              color $transition-sm-medium $transition-easing-default,
              background $transition-sm-medium $transition-easing-default,
              z-index $transition-sm-fast $transition-easing-default;
  @extend %outline-none;
  flex: 1;
  &:first-child {
    border-radius: $border-radius-normal 0 0 $border-radius-normal;
  }
  &:last-child {
    border-radius: 0 $border-radius-normal $border-radius-normal 0;
  }
  &:first-child:last-child {
    border-radius: $border-radius-normal;
  }
  &-original {
    @extend %outline-none;
    z-index: -1;
  }
  &:not(.is-disabled):not(.is-active) {
    &:hover {
      @extend %z-index-active;
      @extend %color-brand-darker;
      border-color: rgba($color-brand-darker, $opacity-medium-half);
    }
    &:active, &:focus {
      @extend %z-index-active;
      @extend %color-brand-darker;
      border-color:  $color-brand-darker;
    }
  }
  &.is-active {
    z-index: 2;
    border-color: $color-brand-darker;
    &:focus {
      border-color: darken($color-brand-darker, 10);
      background: darken($color-brand-darker, 10);
    }
  }
  &.is-disabled {
    opacity: $opacity-medium-half;
    cursor: not-allowed;
  }
  &.is-bordered {
    margin: {
      left: $spacing-margin-xxxsmall;
      right: $spacing-margin-xxxsmall;
    }
    border-radius: $border-radius-normal;
  }
}