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

.Attribute__Selector {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

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

  display: flex;
  position: relative;
  margin: 0;
}

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

  &:hover + .Attribute__Label,
  &:focus-visible + .Attribute__Label {
    box-shadow: 0 0 0 var(--Attribute____border-width)
      var(--Attribute--hover____border-color) inset;
    color: var(--Attribute--hover____color);
  }

  &[readonly] + .Attribute__Label {
    cursor: default;
    pointer-events: none;
    box-shadow: 0 0 0 var(--Attribute____border-width)
      var(--Attribute____border-color) inset;
    color: var(--Attribute____color);
  }

  &:checked + .Attribute__Label,
  &:checked:hover + .Attribute__Label,
  &:checked:focus-visible + .Attribute__Label {
    background-color: var(--Attribute--selected____background-color);
    box-shadow: 0 0 0 var(--Attribute____border-width)
      var(--Attribute--selected____border-color) inset;
    color: var(--Attribute--selected____color);
    cursor: default;
  }

  &:disabled + .Attribute__Label {
    cursor: default;
    pointer-events: none;
    opacity: 0.3;
    pointer-events: none;
  }

  &:focus-visible {
    outline: none;

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

.Attribute__Label {
  background: none;
  // Using `box-shadow` instead of `border` so that the visual border doesn't expand the height and width
  box-shadow: 0 0 0 var(--Attribute____border-width)
    var(--Attribute____border-color) inset;
  border-radius: var(--Attribute____border-radius);
  color: var(--Attribute____color);
  cursor: pointer;
  display: inline-block;
  padding: var(--Attribute____padding);
  transition: box-shadow var(--timing--hover), color var(--timing--hover);
}

.Attribute__Label__Content {
  display: block;
  font-weight: var(--Attribute____font-weight);
  font-size: var(--Attribute____font-size);
  letter-spacing: var(--tracked--loose);
  line-height: var(--Attribute____line-height);
  text-transform: uppercase;
}