/* 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 {
  display: flex;
  flex-direction: column;
  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([spacing="compact"]) {
  --card-border-radius: var(--card-border-radius-compact);
  --card-padding: var(--card-padding-compact);
  --card-gap: var(--card-gap-compact);
  --card-font-size: var(--card-font-size-compact);
  --card-cover-image-padding: var(--card-cover-image-padding-compact);
}

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

:host(:not([type="accordion"])) {
  .moz-card {
    padding-block: var(--card-padding-block, var(--card-padding));
  }
  #moz-card-details {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap-article);
  }
}

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

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

.moz-card,
#moz-card-details,
.moz-card-wrapper,
#content {
  flex: 1;
}

summary {
  cursor: pointer;
}

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

  .chevron-icon {
    background-image: var(--card-accordion-closed-icon, url("chrome://global/skin/icons/arrow-down.svg"));

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

  .chevron-icon {
    background-position: center;
    background-repeat: no-repeat;
  }

  .chevron-icon,
  #heading-icon {
    -moz-context-properties: fill;
    fill: currentColor;
    width: var(--icon-size);
    height: var(--icon-size);
    min-width: var(--icon-size);
    min-height: var(--icon-size);
    padding: 0;
    flex-shrink: 0;
  }
}

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

#content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  font-size: var(--card-font-size);
  padding-inline: var(--card-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-block, var(--card-padding));
    }
  }
}

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

    &:hover {
      background-color: var(--card-header-background-color-hover);
      border-color: var(--card-header-border-color-hover);
      color: var(--card-header-text-color-hover);
    }

    &:active {
      background-color: var(--card-header-background-color-active);
      border-color: var(--card-header-border-color-active);
      color: var(--card-header-text-color-active);
    }

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

  &[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;
      }
    }
  }
}

#cover-image {
  display: none;
  padding-inline: var(--card-cover-image-padding);
}

::slotted(img[slot="cover-image"]) {
  width: 100%;
  height: var(--card-cover-image-height, var(--card-cover-image-height-default));
  object-fit: var(--card-cover-image-object-fit, var(--card-cover-image-object-fit-default));
  object-position: var(--card-cover-image-object-position, var(--card-cover-image-object-position-default));
  border-radius: var(--card-cover-image-border-radius);
}

/* TODO: Probably opt-into this instead with a class or something */
/* stylelint-disable-next-line stylelint-plugin-mozilla/no-has-selector */
:host(:has([slot="cover-image"])) {
  .moz-card {
    padding-block-start: var(--card-cover-image-padding);
  }

  #cover-image {
    display: block;
  }
}
