@import '../../styles/define';

.hor-radio-button {
  .hor-cell-value {
      flex-wrap: wrap;
      margin-top: j(-6);
  }

  &.is-row {
    .hor-radio-button-item {
      min-width: j(60);
      height: j(30);
      padding: 0 j(10);
      margin-left: j(6);
    }
  }

  &.is-column {
    .hor-radio-button-item {
      margin-right: j(6);
      min-width: j(60);
    }
    &.span-1 .hor-radio-button-item{
      width: 100%;
      height: j(40);
      &:nth-child(n) {
        margin-right: 0;
      }
    }
    &.span-2 .hor-radio-button-item{
      width: 49%;
      height: j(40);
      &:nth-child(2n) {
        margin-right: 0;
      }
    }
    &.span-3 .hor-radio-button-item{
      width: 32%;
      height: j(40);
      &:nth-child(3n) {
        margin-right: 0;
      }
    }
    &.span-4 .hor-radio-button-item {
      width: 23%;
      height: j(40);

      &:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
}



.hor-radio-button-item {
  @extend %df;
  @extend %aic;
  @extend %jcc;
  @extend %cp;
  @extend %usn;
  @extend %bsb;
  @extend %bn;
  margin-top: j(6);
  border-radius: j(2);
  color: var(--hor-text-color);
  background-color: var(--hor-background-color);
  transition: all 0.2s ease;

  &.is-checked {
    position: relative;
    color: var(--hor-primary-color);
    background-color: var(--hor-primary-color-2);
  }

  &.is-disabled {
    color: var(--hor-disabled-text-color) !important;
    opacity: var(--hor-disabled-opacity);
    cursor: not-allowed;
  }
}

.hor-radio-label {
  @extend %df;
  @extend %aic;
  @extend %jcc;
  @include twno(1);
  text-align: center!important;
}