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

/* This file defines the various widgets used across the application. */

/* Default Button Styles */

.button {
  --icon-size: 16px;
  appearance: none;
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: var(--button-border-size) solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  padding: var( --button-padding);
  margin: var(--button-margin);
  min-width: 6em;
  -moz-context-properties: fill, stroke;
  fill: color-mix(in srgb, currentColor 20%, transparent);
  stroke: currentColor;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: inherit;
}

.button:enabled:hover,
.select:enabled:hover {
  color: var(--button-hover-text-color);
  background-color: var(--button-hover-background-color);
  border-color: var(--button-border-color);
}

.button:focus-visible,
.select:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

.button[aria-pressed="true"] {
  box-shadow: var(--button-pressed-shadow);
}

.button:enabled:hover:active,
.select:enabled:hover:active {
  background-color: var(--button-active-background-color);
  border-color: var(--button-border-color);
}

.button:disabled,
.select:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.button[hidden],
.select[hidden] {
  display: none;
}

.button:dir(rtl),
.button:-moz-locale-dir(rtl) {
  background-position-x: right var(--button-padding);
}

.button > img {
  pointer-events: none;
}

.button.icon-button {
  background-image: none;
  background-size: var(--icon-size);
  background-position: var(--button-padding) center;
  background-repeat: no-repeat;
  padding-inline-start: calc(var(--button-padding) * 2 + var(--icon-size));
  padding-inline-end: calc(var(--button-padding) * 2);
  min-width: 0;
}

.button.icon-only {
  background-position: center;
  /* 2px at the end for the border. */
  height: calc(var(--button-padding) * 2 + var(--icon-size) + 2px);
  padding: 0;
  aspect-ratio: 1;
}

.button.toolbar-button,
.button.unified-toolbar-button {
  background-color: transparent;
  color: currentColor;
  border-color: transparent;
  margin-block: 4px;
}

.button.toolbar-button[open="true"],
.button.toolbar-button:not([disabled="true"]):hover,
.button.unified-toolbar-button:enabled:is([aria-pressed="true"], :hover) {
  color: var(--button-hover-text-color);
  background-color: var(--toolbar-button-hover-background-color);
  border-color: var(--toolbar-button-hover-border-color);
}

.button.toolbar-button[open="true"] {
  color: var(--button-hover-text-color);
}

.button.unified-toolbar-button[aria-pressed="true"]:enabled {
  color: var(--button-hover-text-color);
  box-shadow: var(--button-pressed-shadow);
}

.button.unified-toolbar-button[aria-pressed="true"]:enabled:hover {
   background-color: var(--toolbar-button-hover-checked-color);
}

.button.toolbar-button:not([disabled="true"]):hover:active,
.button.unified-toolbar-button:enabled:hover:active {
  background-color: var(--toolbar-button-active-background-color);
  border-color: var(--toolbar-button-active-border-color);
}

@media (-moz-windows-accent-color-in-titlebar) {
    #navigation-toolbox :is(.unified-toolbar-button, .toolbar-button):not(:-moz-lwtheme):focus-visible {
    outline-color: accentColorText;
  }
}

/* Primary Button Styles */

.button.button-primary {
  background-color: var(--button-primary-background-color);
  color: var(--button-primary-text-color);
  border-color: var(--button-primary-border-color);
}

.button.button-primary:hover {
  background-color: var(--button-primary-hover-background-color);
  color: var(--button-primary-text-color);
  border-color: var(--button-primary-border-color);
}

@media (prefers-contrast) {
  .button.button-primary:not(:-moz-lwtheme):hover {
    border-color: var(--button-primary-hover-border-color);
  }
}

.button.button-primary:hover:active {
  background-color: var(--button-primary-active-background-color);
  border-color: var(--button-primary-border-color);
}

/* Destructive Button Styles */

.button.button-destructive {
  background-color: var(--button-destructive-background-color);
  color: var(--button-destructive-text-color);
  border-color: var(--button-destructive-border-color);
}

.button.button-destructive:hover {
  background-color: var(--button-destructive-hover-background-color);
  border-color: var(--button-destructive-border-color);
}

.button.button-destructive:hover:active {
  background-color: var(--button-destructive-active-background-color);
  border-color: var(--button-destructive-border-color);
}

/* Flat Button Styles */

.button.button-flat {
  background-color: transparent;
  color: currentColor;
  border-color: transparent;
}

.button.button-flat:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  border-color: transparent;
}

.button.button-flat:focus-visible {
  color: currentColor;
}

.button.button-flat:hover:active {
  background-color: color-mix(in srgb, currentColor 30%, transparent);
  border-color: transparent;
}

@media (prefers-contrast) {
  .button.button-flat:hover,
  .button.button-flat:hover:active {
    background-color: SelectedItem;
  }
}

/* Link Button Styles */

.button.link-button {
  background-color: transparent;
  color: var(--button-link-text-color);
  border-color: transparent;
}

.button.link-button:hover {
  background-color: transparent;
  color: var(--button-link-text-color);
  border-color: transparent;
  text-decoration: underline;
}

.button.link-button:hover:active {
  background-color: transparent;
  color: var(--button-link-active-text-color);
  border-color: transparent;
}

/* Check Button Styles */

.button.check-button {
  position: relative;
}

.button.check-button:not(.icon-button) {
  padding-inline-start: calc(var(--button-padding) * 2 + 9px);
  padding-inline-end: calc(var(--button-padding) * 2);
}

.button.check-button.icon-button {
  background-position: calc(var(--button-padding) * 1.2 + var(--button-pressed-indicator-padding)) center;
  padding-inline-start: calc(var(--button-padding) * 2 + var(--icon-size) + var(--button-pressed-indicator-padding));
}

.button.check-button.icon-button:dir(rtl),
.button.check-button.icon-button:-moz-locale-dir(rtl) {
  background-position-x: right calc(var(--button-padding) * 1.2 + var(--button-pressed-indicator-padding));
}

.button.check-button.icon-only {
  background-position: calc(var(--button-padding) + var(--button-pressed-indicator-padding)) center;
  aspect-ratio: auto;
}

.button.check-button.icon-only:dir(rtl),
.button.check-button.icon-only:-moz-locale-dir(rtl) {
  background-position-x: right calc(var(--button-padding) + var(--button-pressed-indicator-padding));
}

.button.check-button::before {
  content: '';
  box-sizing: border-box;
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 4px;
  width: 4px;
  height: 12px;
  margin: auto 3px;
  position: absolute;
  inset-block: 0;
  inset-inline-start: 2px;
}

.button.check-button[aria-pressed="true"]::before {
  background-color: var(--button-pressed-indicator-background-color);
  border-color: var(--button-pressed-indicator-border-color);
  box-shadow: var(--button-pressed-indicator-shadow);
}

@media (prefers-reduced-motion: no-preference) {
  .button {
    transition: background-color .15s, border-color .15s;
  }
}

/* Button Group Styles */

.button-group {
  display: inline-flex;
  color: var(--button-text-color);
  border: var(--button-border-size) solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  margin: var(--button-margin);
  position: relative;
  isolation: isolate;
  z-index: 1;
}

.button-group .button + .button:not(:last-child) {
  border-inline-end: var(--button-border-size) solid var(--button-border-color);
}

.button-group :is(.button, input) {
  --button-margin: 0;
  border: none;
  border-radius: 0;
  z-index: 2;
}

.button-group .button:focus-visible {
  outline-offset: 0;
  z-index: 3;
}

.button-group .button:first-child {
  border-inline-end: var(--button-border-size) solid var(--button-border-color);
  border-start-start-radius: calc(var(--button-border-radius) - 1px);
  border-end-start-radius: calc(var(--button-border-radius) - 1px);
}

.button-group .button:last-child {
  border-start-end-radius: calc(var(--button-border-radius) - 1px);
  border-end-end-radius: calc(var(--button-border-radius) - 1px);
}

@container threadPane (max-width: 999px) {
  .button.collapsible-button {
    padding-inline-end: 0;
  }

  .button.collapsible-button span {
    display: inline-block;
    visibility: hidden;
    width: 0;
  }
}

/* Select element */

.select {
  appearance: none;
  text-decoration: none;
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: var(--button-border-size) solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  padding: var(--button-padding);
  margin: var(--button-margin);
  font-size: 1em;
}

.select:not([size], [multiple]) {
  --logical-padding: 3px;
  --start-padding: calc(var(--logical-padding) + 3px);
  --end-padding: calc(var(--logical-padding) + 9px);
  --background-image-width: 12px;
  background-image: var(--icon-nav-down-sm);
  background-position: right calc(var(--end-padding) / 2) center;
  background-repeat: no-repeat;
  background-size: auto var(--background-image-width);
  -moz-context-properties: fill;
  fill: currentColor;
  font: inherit;
  padding-inline-start: var(--start-padding);
  padding-inline-end: calc(var(--background-image-width) + var(--end-padding));
  text-overflow: ellipsis;
}

.select:not([size], [multiple]):dir(rtl) {
  background-position-x: left calc(var(--end-padding) / 2);
}

.select:not([size], [multiple]) > option {
  background-color: var(--in-content-box-background);
  color: var(--in-content-text-color);
}