@use '../abstracts/mixins' as *;

.card,
.panel {
  --background-color: var(--neutral-color-variation-1);
  --color: var(--on-neutral-color-variation-1);
  --border-color: var(--neutral-color-variation-3);
  --border-width: var(--elem-border-width);
  --border-radius: var(--elem-border-radius);
  --box-shadow: var(--neutral-shadow);

  display: flex;
  flex-direction: column;
  //padding: var(--inner-v-spacing) var(--inner-h-spacing);
  //overflow: auto;
  background-color: var(--background-color);
  color: var(--color);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  background-clip: border-box;
  box-shadow: var(--box-shadow);
  //margin:var(--spacing) 0;

  &:first-child {
    margin-top: 0;
  }

  & + *:is(:not(h1, h2, h3, h4, h5, h6, section, article, .section, .article, .card, footer)) {
    margin-top: var(--block-half-spacing);
  }

  //> header,
  //> footer {
  //  //margin: calc(var(--inner-v-spacing) * -1) calc(var(--inner-h-spacing) * -1);
  //  padding: var(--inner-v-spacing) var(--inner-h-spacing);
  //}
  > &__header,
  &__footer,
  > header,
  > footer {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  > &__header,
  > header {
    border-top-right-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
  }

  &__footer,
  > footer {
    margin-top: auto;
    //padding-top:calc(var(--inner-v-spacing) + (var(--spacing) * 2));
    border-bottom-right-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
  }

  > figure:first-child,
  > figure:first-child img,
  > &__header img:first-child,
  > header img:first-child,
  > &__header figure:first-child,
  > &__header figure:first-child img,
  > header figure:first-child,
  > header figure:first-child img,
  > img:first-child {
    //margin: calc(var(--inner-v-spacing)*-1) calc(var(--inner-h-spacing)*-1);
    border-top-right-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
  }

  > figure:last-child,
  > figure:last-child img,
  > &__footer img:last-child,
  > &__footer figure:last-child,
  > &__footer figure:last-child img,
  > footer img:last-child,
  > footer figure:last-child,
  > footer figure:last-child img,
  > img:last-child {
    margin-top: 0;
    border-bottom-right-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
  }

  &--collapsable {
    transition: max-height 0.25s ease-out, opacity 0.25s ease;

    &,
    &[hidden],
    &[aria-hidden='true'] {
      visibility: collapse;
      height: 0;
      max-height: 0;
      opacity: 0;
    }

    &:not([hidden]),
    &[aria-hidden='false'],
    &.expanded {
      visibility: visible;
      height: auto;
      max-height: 100rem;
      opacity: 1;
    }
  }
}

.panel {
  display: block;
  padding: var(--inner-v-spacing) var(--half-spacing);
  border: none;
  background-color: unset;
  box-shadow: none;
  color: unset;
}

@include mq(mobile) {
  .panel {
    padding: var(--inner-v-spacing) var(--spacing);
  }
}

@include mq(tablet) {
  .panel {
    padding: var(--inner-v-spacing) var(--inner-h-spacing);
  }
}