@import 'themes/default';
@import 'themes/bandit';

.Selector {
  --focus--offset: var(--focus--width);

  position: relative;

  &--with-label {
    display: flex;
  }
}

.Selector__Checkbox,
.Selector__Radio {
  appearance: none;
  font-size: inherit;
  margin: 0;
  opacity: 0.1;
  position: absolute;

  & ~ .Selector__Field {
    background-clip: content-box;
    display: block;
    flex-shrink: 0;
    margin-bottom: 0;
  }

  & ~ .Selector__Label {
    display: block;
    line-height: var(--Selector__Label____line-height);
    margin-bottom: 0;
    padding-left: var(--Selector__Label____padding-left);
    position: relative;
    // The label text needs to be bumped up slightly to optically align with
    // the input. The exact amount depends on the input height and the label's
    // line height.
    top: var(--Selector__Label____top-offset);
  }

  ~ .Selector__Icon {
    display: none;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    vertical-align: middle;
  }

  &:checked,
  &:indeterminate {
    ~ .Selector__Icon {
      display: inherit;
    }
  }

  &:disabled ~ .Selector__Label,
  &:disabled ~ .Selector__Field {
    cursor: default;
    opacity: 0.3;
  }

  &:focus-visible {
    outline: none;

    & + .Selector__Field {
      outline: var(--focus--color) var(--focus--style) var(--focus--width);
      outline-offset: var(--focus--offset);
    }
  }
}

.Selector__Radio {
  height: var(--Radio____size);
  width: var(--Radio____size);

  ~ .Selector__Field {
    background-color: var(--Radio--unchecked____bg-color);
    border: solid var(--Radio--unchecked____border-width)
      var(--Radio--unchecked____border-color);
    border-radius: var(--Radio____radius);
    height: var(--Radio____size);
    padding: var(--Radio--unchecked____padding);
    transition: border var(--Radio____transition-duration),
      padding var(--Radio____transition-duration);
    width: var(--Radio____size);
  }

  ~ .Selector__Icon {
    color: var(--Radio--unchecked__Icon____color);
    height: var(--Radio____size);
    width: var(--Radio____size);
  }

  &:checked {
    ~ .Selector__Field {
      background-color: var(--Radio--checked____bg-color);
      border-color: var(--Radio--checked____border-color);
      border-width: var(--Radio--checked____border-width);
      padding: var(--Radio--checked____padding);
    }

    ~ .Selector__Icon {
      color: var(--Radio--checked__Icon____color);
    }
  }
}

.Selector__Checkbox {
  height: var(--Checkbox____size);
  width: var(--Checkbox____size);

  ~ .Selector__Field {
    background-color: var(--Checkbox--unchecked____bg-color);
    border: solid var(--Checkbox--unchecked____border-width)
      var(--Checkbox--unchecked____border-color);
    border-radius: var(--Checkbox____radius);
    height: var(--Checkbox____size);
    padding: var(--Checkbox--unchecked____padding);
    transition: border var(--Checkbox____transition-duration),
      padding var(--Checkbox____transition-duration);
    width: var(--Checkbox____size);
  }

  ~ .Selector__Icon {
    color: var(--Checkbox--unchecked__Icon____color);
    height: var(--Checkbox____size);
    width: var(--Checkbox____size);
  }

  &:checked,
  &:indeterminate {
    ~ .Selector__Field {
      background-color: var(--Checkbox--checked____bg-color);
      border-color: var(--Checkbox--checked____border-color);
      border-width: var(--Checkbox--checked____border-width);
      padding: var(--Checkbox--checked____padding);
    }

    ~ .Selector__Icon {
      color: var(--Checkbox--checked__Icon____color);
    }
  }

  &[readonly] {
    ~ .Selector__Label {
      opacity: 1;
    }

    ~ .Selector__Icon {
      color: var(--Checkbox--readonly--unchecked__Icon____color);
      display: inherit;
    }

    ~ .Selector__Field,
    &:checked ~ .Selector__Field,
    &:indeterminate ~ .Selector__Field {
      background-color: inherit;
      border: none;
    }

    &:checked,
    &:indeterminate {
      ~ .Selector__Icon {
        color: var(--Checkbox--readonly--checked__Icon____color);
      }
    }
  }
}