/* 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/. */

@import url("chrome://global/content/elements/moz-input-color.tokens.css");

:host {
  display: flex;
  align-items: center;
}

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

label:hover {
  border-color: var(--input-color-border-color-hover);
  background-color: var(--input-color-background-color-hover);
  color: var(--input-color-text-color-hover);
}

label:hover:active {
  border-color: var(--input-color-border-color-active);
  background-color: var(--input-color-background-color-active);
  color: var(--input-color-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(--input-color-swatch-size);
  height: var(--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(--input-color-swatch-border-radius);
  border: var(--border-width) solid var(--input-color-swatch-border-color);
  box-sizing: border-box;
}

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