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

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

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

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

.hor-checkbox-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); //#F6F7FA
  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-checkbox-label {
  @extend %df;
  @extend %aic;
  @extend %jcc;
  @include twno(2);
  line-height: 1;
  padding: 0 j(4);
  text-align: center !important;
}