/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.container {
  display: inline-flex;
  position: relative;
}

.control {
  flex: 1;
  padding-inline-end: var(--cpd-space-12x) !important;

  /* From the flexbox spec:
   *   "By default, flex items won’t shrink below their minimum content size"
   * This allows the element to shrink lower than its natural default size.
   */
  min-inline-size: 0;
}

.action {
  all: unset;
  color: var(--cpd-color-icon-secondary);
  background-color: transparent;
  cursor: pointer;
  position: absolute;
  inset-block: var(--cpd-space-2x);
  inset-inline-end: var(--cpd-space-2x);
  padding: var(--cpd-space-1x);
  overflow: visible;
  border-radius: 50%;
}

.action > svg {
  inline-size: var(--cpd-space-6x);
  block-size: var(--cpd-space-6x);
}

@media (hover) {
  .action:hover {
    color: var(--cpd-color-icon-primary);
    background-color: var(--cpd-color-bg-subtle-secondary);
  }
}

.action:focus-visible {
  outline: 2px solid var(--cpd-color-border-focused);
  outline-offset: 1px;
}

.control[disabled] + .action {
  pointer-events: none;
  color: var(--cpd-color-text-disabled);
}

.control[readonly] + .action {
  pointer-events: none;
  color: var(--cpd-color-text-secondary);
}