//-----------------------------
// ButtonRadio
//-----------------------------
@import './button';

$button-radio-padding-x: $spacing-md !default;

.button-radio-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.button-radio {
  @include hidden;
  visibility: inherit;
}

.button-radio__label {
  @include button;
  padding-left: $button-radio-padding-x;
  padding-right: $button-radio-padding-x;

  &:hover {
    background-color: $light-gray-3;
  }
}

.button-radio:checked
  + .button-radio__label {
    background-color: $button-primary-bg;
    color: $button-primary-color;
  }


// Workaround for: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231
[disabled] ~ _ {
  font-size: inherit;
}

.button-radio:disabled {
  + .button-radio__label {
    color: $light-gray-2;
    cursor: not-allowed;
    border-color: $light-gray-1;
    background: $light-gray-3;
  }
}

// Focus

.button-radio:focus
  + .button-radio__label {
  box-shadow: 0 0 0 2px rgba($primary,.25);
  outline: 1px solid transparent;
}

.button-radio__label.skeleton
  .button-radio__appearance {
  display: none;
}

.button-radio-wrapper .button-radio__label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.button-radio-wrapper:not(:last-of-type) {
  .button-radio__label {
    border-radius: 0;
    border-right: none;
  }
}

.button-radio-wrapper:last-of-type {
  .button-radio__label {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}


.button-radio-wrapper:first-of-type {
  .button-radio__label {
    border-top-left-radius: $border-radius;
    border-bottom-left-radius: $border-radius;
  }
}

// Skeleton State
.button-radio__label.skeleton {
  @include skeleton;
  width: 200px;
}