<div class="settings" role="group" aria-label="ACL settings">
  <div class="settings__header">
    <span class="settings__title">Settings</span>
    <button
      type="button"
      class="settings__close"
      aria-label="Close ACL settings"
      (click)="closeFlyout.emit()"
    >
      <acl-icon [name]="aclIconName.Close" title="Close" size="12"></acl-icon>
    </button>
  </div>

  <div class="settings__body">
    <div class="settings__row">
      <span class="settings__path" title="ACL path">{{ aclPath() }}</span>
      <button
        type="button"
        class="settings__copy"
        title="Copy ACL path"
        aria-label="Copy ACL path"
        (click)="copyPath()"
      >
        <acl-icon [name]="aclIconName.Copy" title="Copy" size="24"></acl-icon>
      </button>
    </div>

    <div class="settings__row settings__row--state">
      <label class="settings__label" for="acl-hint-state">State</label>
      <select
        id="acl-hint-state"
        class="settings__select"
        (change)="onStateChange($any($event.target).value)"
      >
        @for (option of states; track option) {
        <option [value]="option" [selected]="option === state()">{{ stateLabels[option] }}</option>
        }
      </select>
    </div>

    <button type="button" class="settings__show-all" (click)="showAllSettings()">
      <span>Show all settings</span>
      <acl-icon [name]="aclIconName.ArrowRight" size="20"></acl-icon>
    </button>
  </div>
</div>

./acl-hint-settings.component.scss

@use '../inspector.shared' as *;
@use '../inspector.colors' as *;

// Inlined because the native select arrow cannot be styled.
$chevron: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M6 9.5 12 15.5 18 9.5" stroke="%23ececec" stroke-width="2" fill="none"/></svg>');

:host {
  display: block;
}

.settings {
  box-sizing: border-box;
  width: 320px;
  border-radius: 4px;
  background-color: $hint-color-surface;
  color: $hint-color-text;
  color-scheme: dark;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.2px;
}

.settings__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  height: 40px;
  padding: 8px 16px;
  border-bottom: 1px solid $hint-color-border;
}

.settings__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: normal;
}

.settings__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.settings__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
}

.settings__row--state {
  gap: 16px;
}

.settings__path {
  flex: 1;
  overflow-wrap: anywhere;
  color: $hint-color-text;
}

.settings__label {
  flex: 0 0 auto;
  color: $hint-color-text;
}

.settings__close,
.settings__copy {
  @include base-button-styles;

  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 4px;
  color: $hint-color-text-muted;

  &:hover {
    color: $hint-color-accent;
  }
}

.settings__copy {
  width: 24px;
  height: 24px;
}

.settings__select {
  flex: 1;
  box-sizing: border-box;
  height: 32px;
  padding: 6px 32px 6px 12px;
  border: 1px solid $hint-color-border;
  border-radius: 4px;
  outline: none;
  background-color: $hint-color-control;
  background-image: $chevron;
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: $hint-color-text-muted;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.2px;
  appearance: none;
  cursor: pointer;

  &:focus-visible {
    border-color: $hint-color-accent;
  }

  option {
    background-color: $hint-color-control;
    color: $hint-color-text-muted;

    &:hover {
      background-color: $hint-color-surface-hover;
    }
  }

  // The native dropdown is a separate document that takes only resting colours from here.
  @supports (appearance: base-select) {
    &,
    &::picker(select) {
      appearance: base-select;
    }

    &::picker(select) {
      padding: 0;
      border: 1px solid $hint-color-border;
      border-radius: 4px;
      background-color: $hint-color-control;
    }

    &::picker-icon {
      display: none;
    }

    option {
      padding: 6px 12px;

      &::checkmark {
        display: none;
      }
    }
  }
}

.settings__show-all {
  @include base-button-styles;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: 32px;
  padding: 6px 12px;
  border: 1px solid $hint-color-border;
  border-radius: 4px;
  color: $hint-color-text-muted;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.2px;

  &:hover {
    background-color: $hint-color-surface-hover;
  }
}