.select {
  position: relative;
  max-width: 300px;

  &[data-required] .label::after {
    content: '*';
  }
  &[data-open] .chevron {
    rotate: -90deg;
  }
  &[data-focused] {
    .button {
      border: 1px solid var(--Border-Interactive-Focus);
      outline: none;
    }
    .selectValue {
      color: var(--Text-Interactive-Focus);
    }
  }
}

.chevron {
  rotate: 90deg;
}

.button {
  background-color: var(--Surface-UI-Fill-Default);
  border: 1px solid var(--Border-Default);
  border-radius: var(--Corner-radius-md);
  padding: var(--Space-x1);
  display: flex;
  align-items: center;
  gap: var(--Space-x1);
  width: 100%;
  height: 56px;

  &[disabled] {
    color: var(--Text-Interactive-Disabled);
    background-color: var(--Surface-Primary-Disabled);

    .label,
    .selectValue {
      color: var(--Text-Interactive-Disabled);
    }
  }
}

.selectValue {
  display: flex;
  flex-direction: column;
  gap: calc(var(--Space-x05) / 2);
  align-items: flex-start;
  flex: 1;
  color: var(--Text-Default);
}

.label {
  color: var(--Text-Interactive-Placeholder);
}

.popover {
  background-color: var(--Surface-Primary-Default);
  border-radius: var(--Corner-radius-md);
  box-shadow: 0 0 14px 6px rgb(0 0 0 / 10%);
  display: inline-flex;
  flex-direction: column;
  gap: var(--Space-x1);
  overflow: auto;
  padding: var(--Space-x2);
  outline: none;
  min-width: 280px;
}

.listBox {
  display: flex;
  flex-direction: column;
  gap: var(--Space-x1);
  outline: none;
}

.listBoxItem {
  padding: var(--Space-x1) var(--Space-x1) var(--Space-x1) var(--Space-x15);
  color: var(--Text-Default);
  border-radius: var(--Corner-radius-md);
  display: flex;
  align-items: center;
  gap: var(--Space-x1);

  &[data-focused] {
    outline: none;
  }
  &[data-focused],
  &[data-hovered] {
    background-color: var(--Surface-Primary-Hover);
  }
}