//
// @description :
// @author      : Adarsh Pastakia
// @copyright   : 2017
// @license     : MIT

.ui-option-group {
  .ui-group-wrapper {
    background: none;
    box-shadow: none;
    @include flex(1 1 1em);
    @include flex-wrap(wrap);

    .ui-option {
      min-width: 5em;
    }
  }

  &:not(.ui-vertical) {
    &.cols-1 .ui-option {
      @include flex(0 1 100%);
    }

    &.cols-2 .ui-option {
      @include flex(0 1 50%);
    }

    &.cols-3 .ui-option {
      @include flex(0 1 33%);
    }

    &.cols-4 .ui-option {
      @include flex(0 1 25%);
    }

    &.cols-5 .ui-option {
      @include flex(0 1 20%);
    }
  }

  &.ui-vertical .ui-group-wrapper {
    @include flex-direction(column);
  }
}

.ui-option {
  line-height: 1;
  white-space: nowrap;
  position   : relative;
  display    : inline-block;

  input {
    width   : 1em;
    height  : 1em;
    opacity : 0;
    margin  : 0;
    cursor  : pointer;
    position: absolute;

    &:focus ~ .ui-icon,
    &:hover ~ .ui-icon {
      color: $input-focus-border;
    }
  }

  span {
    color: $input-text;
  }

  .ui-option-label {
    color      : $input-label-text;
    font-size  : 0.8em;
    line-height: 1em;
    @include ellipsis();
  }

  &.ui-radio input:checked ~ .off {
    display: none;
  }

  &.ui-radio input:not(:checked) ~ .on {
    display: none;
  }

  &.ui-disabled {
    .ui-option-label {
      color: rgba($input-label-text, .5);
    }

    span {
      color: rgba($input-text, .5) !important;
    }

    &:after {
      content   : '';
      @include position(absolute, 0);
      background: rgba($input-disabled-bg, 0.1);
    }
  }
}