// Imports
@import "variables";

.nv-selection-control {
  @apply inline-flex items-center text-primary focus-visible:outline-0;
  * {
    @apply cursor-pointer;
  }

  & + & {
    @apply ml-3;
  }

  &__label {
    @apply leading-none text-black;
  }

  &__wrap {
    @apply relative inline-flex leading-none transition mr-1;
  }

  &:not(.nv-selection-control--disabled):not(.nv-selection-control--selected):not(:hover):not(:focus):not(:active) {
    .nv-selection-control__wrap {
      @apply text-gray-400 #{!important};
    }
  }

  &--disabled {
    * {
      @apply cursor-not-allowed;
    }

    .nv-selection-control__wrap {
      @apply text-gray-300 #{!important};
    }

    &:not(.nv-selection-control--selected) {
      .nv-radio__input {
        @apply bg-gray-300 #{!important};
      }
    }
  }
  &--readonly {
    &:not(.nv-selection-control--selected) {
      @apply hover:text-gray-400 focus:text-gray-400;
    }

    * {
      @apply cursor-not-allowed;
    }
  }

  input[type="radio"],
  input[type="checkbox"] {
    @apply hidden;
  }

  @each $name, $size in $selection-control-sizes {
    &.nv-size--#{$name} {
      .nv-selection-control__label {
        font-size: map-deep-get($selection-control-font-sizes, $name);
      }

      .nv-icon {
        font-size: #{$size};
        width: #{$size};
        height: #{$size};

        svg {
          width: #{$size};
          height: #{$size};
        }
      }
    }
  }
}