sousa-gecko/toolkit/content/widgets/moz-box-common.css

/* 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-box.tokens.css");

@layer box-common {
  :host {
    border-inline-start: var(--box-border-inline-start, var(--box-border));
    border-inline-end: var(--box-border-inline-end, var(--box-border));
    border-block-start: var(--box-border-block-start, var(--box-border));
    border-block-end: var(--box-border-block-end, var(--box-border));
    border-start-start-radius: var(--box-border-radius-start, var(--box-border-radius));
    border-start-end-radius: var(--box-border-radius-start, var(--box-border-radius));
    border-end-start-radius: var(--box-border-radius-end, var(--box-border-radius));
    border-end-end-radius: var(--box-border-radius-end, var(--box-border-radius));
    display: block;
    position: relative;
  }

  :host([layout="medium-icon"]) {
    --box-icon-size: var(--icon-size-large);
  }

  :host([layout="large-icon"]) {
    --box-icon-size: var(--icon-size-xlarge);
  }

  .text-content {
    display: grid;
    place-items: center start;
    gap: var(--space-xsmall) var(--space-small);
    grid-template-columns: var(--box-icon-size) 1fr;
    grid-template-areas: "label label";

    &.has-icon {
      grid-template-areas: "icon label";
    }

    &.has-description {
      grid-template-areas:
        "label label"
        "description description";
    }

    &.has-icon.has-description {
      grid-template-areas:
        "icon label"
        "description description";
    }
  }

  .label {
    grid-area: label;
    font-weight: var(--box-label-font-weight, normal);
    align-self: var(--box-label-alignment);
  }

  .icon {
    grid-area: icon;
    box-sizing: border-box;
    width: var(--icon-size);
    height: var(--icon-size);
    padding: var(--box-icon-padding, 0);
    -moz-context-properties: fill, stroke;
    fill: var(--box-icon-fill);
    stroke: var(--box-icon-stroke);
    background-color: var(--box-icon-background, transparent);
    border-radius: var(--box-icon-border-radius, 0);

    &:not(.nav-icon) {
      fill: var(--box-icon-start-fill, var(--box-icon-fill));
      stroke: var(--box-icon-start-stroke, var(--box-icon-stroke));
      width: var(--box-icon-size);
      height: var(--box-icon-size);

      .button & {
        fill: var(--box-icon-start-fill, var(--button-icon-fill));
        stroke: var(--box-icon-start-stroke, var(--button-icon-stroke));
      }
    }

    @media (prefers-contrast) {
      .button & {
        --box-icon-fill: var(--button-icon-fill);
        --box-icon-stroke: var(--button-icon-stroke);
        --box-icon-start-fill: var(--box-icon-fill);
        --box-icon-start-stroke: var(--box-icon-stroke);
      }
    }
  }

  .description {
    grid-area: description;
    display: flex;
    justify-content: start;
    gap: var(--space-small);
    align-self: var(--box-description-alignment);
  }
}

.button {
  box-sizing: border-box;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  font-family: inherit;
  font-size: inherit;
  appearance: none;
  background-color: var(--box-button-background-color);
  color: var(--box-button-text-color);
  display: flex;
  padding: var(--box-padding);
  gap: var(--space-small);
  text-align: start;
  border: none;
  border-start-start-radius: var(--box-border-radius-start, var(--box-border-radius-inner));
  border-start-end-radius: var(--box-border-radius-start, var(--box-border-radius-inner));
  border-end-start-radius: var(--box-border-radius-end, var(--box-border-radius-inner));
  border-end-end-radius: var(--box-border-radius-end, var(--box-border-radius-inner));

  &:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-inset);
  }

  &:hover {
    background-color: var(--box-button-background-color-hover);
    color: var(--box-button-text-color-hover);
  }

  &:hover:active:not(:disabled) {
    background-color: var(--box-button-background-color-active);
    color: var(--box-button-text-color-active);
  }

  &:disabled {
    background-color: var(--box-button-background-color-disabled);
    color: var(--box-button-text-color-disabled);
    opacity: var(--button-opacity-disabled);
  }
}

.nav-icon:dir(rtl) {
  scale: -1 1;
}