/* 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([layout$="-icon"]) {
  .text-content.has-icon.has-description {
    grid-template-areas:
      "icon label"
      "icon description";
  }
}

:host([static]) {
  /* Indent static items the width of the handle button + gap */
  padding-inline-start: calc(var(--button-size-icon) + var(--space-small));
}

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

.text-content {
  .label-wrapper {
    grid-area: label;
  }

  .description-wrapper {
    grid-area: description;
  }

  &.has-support-page .label,
  &.has-support-page .description {
    margin-inline-end: var(--space-xsmall);
  }

  &:not(.has-description) .description-wrapper,
  &:not(.has-support-page) slot[name="support-link"] {
    display: none;
  }

  .label,
  .description,
  .support-page {
    display: inline;
  }
}

.description + .support-page {
  font-size: var(--font-size-small);
}

.box-container {
  padding: var(--box-padding, var(--space-large));
  font-size: inherit;
  text-align: start;
}

.box-container,
slot[name="actions"],
slot[name="actions-start"] {
  display: flex;
  align-items: center;
  gap: var(--space-small);
}

.box-content {
  flex: 1 1 auto;
}

.handle {
  width: var(--button-size-icon);
  height: var(--button-size-icon);
  cursor: grab;
  background-image: url("chrome://global/skin/icons/move-16.svg");
  background-color: var(--button-background-color-ghost);
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--button-border-radius);
  -moz-context-properties: fill;
  /** Override the text color set by description-deemphasized for the handle.
      This cannot be disabled, hence the color should remain the default. */
  color: var(--button-text-color-ghost);
  fill: var(--button-icon-fill);
  flex-shrink: 0;
}

.actions {
  word-wrap: normal;
}

.actions:has(> slot:not(:has-slotted)) {
  display: none;
}