/* 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 {
  --card-border-color: color-mix(in srgb, currentColor 10%, transparent);
  --card-border-radius: var(--border-radius-medium);
  --card-border-width: var(--border-width);
  --card-border: var(--card-border-width) solid var(--card-border-color);
  --card-background-color: var(--box-background-color);
  --card-focus-outline: var(--focus-outline);
  --card-box-shadow: var(--box-shadow-10);
  /* Bug 1791816, 1839523: replace with spacing tokens */
  --card-padding: 1em;
  --card-gap: var(--card-padding);
  --card-article-gap: 0.45em;

  /* Bug 1791816: replace with button tokens */
  @media (prefers-contrast) {
    --button-border-color: var(--border-interactive-color);
    --button-border-color-hover: var(--border-interactive-color-hover);
    --button-border-color-active: var(--border-interactive-color-active);
    --card-border-color: color-mix(in srgb, currentColor 41%, transparent);
  }
  /* Bug 1791816: replace with button tokens */
  @media (forced-colors) {
    --button-background-color: ButtonFace;
    --button-background-color-hover: SelectedItemText;
    --button-background-color-active: SelectedItemText;
    --button-border-color: var(--border-interactive-color);
    --button-border-color-hover: var(--border-interactive-color-hover);
    --button-border-color-active: var(--border-interactive-color-active);
    --button-text-color: ButtonText;
    --button-text-color-hover: SelectedItem;
    --button-text-color-active: SelectedItem;
  }
}

:host {
  display: block;
  border: var(--card-border);
  border-radius: var(--card-border-radius);
  background-color: var(--card-background-color);
  box-shadow: var(--card-box-shadow);
  box-sizing: border-box;
}

:host([type=accordion]) {
  summary {
    padding-block: var(--card-padding);
  }
  #content {
    padding-block-end: var(--card-padding);
  }
}
:host(:not([type=accordion])) {
  .moz-card {
    padding-block: var(--card-padding);
  }
}

.moz-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--card-article-gap);
}

#moz-card-details {
  width: 100%;
}

summary {
  cursor: pointer;
}

#heading-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--card-gap);
  padding-inline: var(--card-padding);
  border-radius: var(--card-border-radius);
}

#heading {
  font-size: var(--font-size-root);
  font-weight: var(--font-weight-bold);
}

#content {
  align-self: stretch;
  padding-inline: var(--card-padding);
  border-end-start-radius: var(--card-border-radius);
  border-end-end-radius: var(--card-border-radius);

  @media (prefers-contrast) {
    :host([type=accordion]) & {
      border-block-start: 0;
      padding-block-start: var(--card-padding);
    }
  }
}

details  {
  > summary {
    list-style: none;
    border-radius: var(--card-border-radius);
    cursor: pointer;

    &:hover {
      background-color: var(--button-background-color-hover);
    }
    @media (prefers-contrast) {
      outline: var(--button-border-color) solid var(--border-width);

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

      &:active {
        outline-color: var(--button-border-color-active);
      }
    }

    @media (forced-colors) {
      color: var(--button-text-color);
      background-color: var(--button-background-color);

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

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

  &[open] {
    summary {
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }
    @media not (prefers-contrast) {
      #content {
        /*
        There is a border shown above this element in prefers-contrast.
        When there isn't a border, there's no need for the extra space.
         */
        padding-block-start: 0;
      }
    }
  }

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

.chevron-icon {
  background-image: url("chrome://global/skin/icons/arrow-down.svg");
  background-position: center;
  background-repeat: no-repeat;
  -moz-context-properties: fill;
  fill: currentColor;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  flex-shrink: 0;
  align-self: flex-start;

  details[open] & {
    background-image: url("chrome://global/skin/icons/arrow-up.svg");
  }
}