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

:host {
  cursor: default;
  display: flex;
}

:host([orientation="vertical"]) {
  width: 100%;

  .image-item {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-medium);

    img {
      width: var(--visual-picker-item-image-size, var(--size-image-xlarge));
      height: var(--visual-picker-item-image-size, var(--size-image-xlarge));
      padding: var(--visual-picker-item-padding, 0);
      object-fit: cover;
      flex-shrink: 0;
    }
  }

  .text-content:has(.label, .description) {
    text-align: start;
    flex: 1;
  }
}

.picker-item {
  --visual-picker-item-border-radius-inner: calc(var(--visual-picker-item-border-radius) - var(--visual-picker-item-border-width));

  overflow: hidden;
  border: var(--visual-picker-item-border-width) solid var(--visual-picker-item-border-color);
  border-radius: var(--visual-picker-item-border-radius);
  /* The margin needs to account for the increased border-width on the checked item. */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  margin: calc(var(--visual-picker-item-border-width-checked) - var(--visual-picker-item-border-width));
  flex: 1;

  &:focus {
    outline: none;
  }

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

  &[checked] {
    --visual-picker-item-border-width: var(--visual-picker-item-border-width-checked);
    border-color: var(--border-color-selected);
    margin: 0;
  }

  ::slotted(:first-child) {
    --visual-picker-item-child-border-radius: var(--visual-picker-item-border-radius-inner);
    border-radius: var(--visual-picker-item-child-border-radius);
  }

  .text-content:has(.label, .description) {
    padding: var(--space-small) var(--space-medium) var(--space-medium);
    text-align: center;
  }

  .label {
    margin: 0;
  }

  .description {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--text-color-deemphasized);
  }

  .label + .description {
    margin-block-start: var(--space-xsmall);
  }

  img {
    display: block;
    width: 100%;
  }
}

.image-item {
  background-color: var(--background-color-box);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

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

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