/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

:host {
  --moz-input-color-swatch-size: var(--dimension-24);

  display: flex;
  align-items: center;
}

label {
  display: flex;
  align-self: stretch;
  align-items: center;
  flex-grow: 1;
  padding-inline: var(--space-medium);
  padding-block: var(--space-small);
  gap: var(--space-small);
  cursor: pointer;
  border: var(--border-width) solid var(--border-color-interactive);
  border-radius: var(--border-radius-medium);
  background-color: var(--button-background-color-ghost);
  color: var(--button-text-color);
}

label:hover {
  border-color: var(--border-color-interactive-hover);
  background-color: var(--button-background-color-ghost-hover);
  color: var(--button-text-color-hover);
}

label:hover:active {
  border-color: var(--border-color-interactive-active);
  background-color: var(--button-background-color-ghost-active);
  color: var(--button-text-color-active);
  outline: none;
}

label:focus-within {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

label span {
  flex-grow: 1;
}

.swatch {
  appearance: none;
  width: var(--moz-input-color-swatch-size);
  height: var(--moz-input-color-swatch-size);
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: initial;
}

.swatch:focus-visible {
  outline: none;
}

.swatch::-moz-color-swatch {
  border-radius: var(--border-radius-circle);
  border: var(--border-width) solid var(--border-color-deemphasized);
  box-sizing: border-box;
}

.icon {
  -moz-context-properties: fill;
  fill: var(--button-icon-fill);
}