.navds-expansioncard {
  --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
  --__axc-expansioncard-padding-block: var(--ax-spacing-4);
  --__axc-expansioncard-padding-inline: var(--ax-spacing-5);

  border-radius: var(--ax-border-radius-xlarge);
  background-color: var(--ax-bg-raised);
  height: fit-content;
  border: 1px solid var(--ax-border-default);

  &:has(.navds-expansioncard__header:hover) {
    box-shadow: 0 0 0 1px var(--ax-border-strong);
    border-color: var(--ax-border-strong);
  }
}

/* ------------------------ ExpansionCard Small-size ------------------------ */
.navds-expansioncard--small {
  --__axc-expansioncard-padding-inline: var(--ax-spacing-4);
  --__axc-expansioncard-padding-block: var(--ax-spacing-3);

  & > .navds-expansioncard__header .navds-expansioncard__title--small {
    margin-top: var(--ax-spacing-05);
  }

  & :is(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
    margin-top: 0;
  }

  & > .navds-expansioncard__header > .navds-expansioncard__header-button {
    min-height: 2rem;
    min-width: 2rem;
  }
}

/* -------------------------- ExpansionCard Header -------------------------- */
.navds-expansioncard__header {
  width: 100%;
  display: flex;
  gap: var(--ax-spacing-4);
  padding: var(--__axc-expansioncard-padding-block) var(--__axc-expansioncard-padding-inline);
  border-radius: var(--__axc-expansioncard-border-radius);
  background-color: transparent;
  position: relative;
  justify-content: space-between;

  &:hover {
    background-color: var(--ax-bg-neutral-raised-hover);
  }

  &[data-open="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    /* Divider between header and content */
    &::after {
      content: "";
      background-color: var(--ax-border-subtle);
      bottom: 0;
      left: var(--__axc-expansioncard-padding-inline);
      height: 1px;
      width: calc(100% - 2 * var(--__axc-expansioncard-padding-inline));
      position: absolute;
      opacity: 1;
    }

    &:hover::after {
      opacity: 0;
    }
  }
}

/* --------------------- ExpansionCard Header typography -------------------- */
.navds-expansioncard__title--small {
  margin-top: 0.625rem;
}

.navds-expansioncard__title--medium {
  margin-top: var(--ax-spacing-2);
}

.navds-expansioncard__title--large {
  margin-top: var(--ax-spacing-1);
}

/* ----------------------- ExpansionCard Header Button ---------------------- */
.navds-expansioncard__header-button {
  display: grid;
  place-content: center;
  cursor: pointer;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: var(--ax-border-radius-large);
  min-height: 3rem;
  min-width: 3rem;
  font-size: 1.5rem;
  align-self: flex-start;

  &:focus-visible {
    outline: 2px solid var(--ax-border-focus);
    outline-offset: 2px;
  }

  @supports not selector(:focus-visible) {
    &:focus {
      outline: 2px solid var(--ax-border-focus);
      outline-offset: 2px;
    }
  }

  /* Makes the whole header clickable */
  &::after {
    inset: 0;
    z-index: 1;
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    cursor: pointer;
  }
}

.navds-expansioncard__header:hover > .navds-expansioncard__header-button {
  background-color: var(--ax-bg-neutral-moderate-hoverA);
}

.navds-expansioncard__header-chevron {
  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
}

.navds-expansioncard__header[data-open="true"] .navds-expansioncard__header-chevron {
  transform: rotateX(-180deg);
}

/* Even if animation always takes 250ms, the perceived effect of current timing function makes the 'closing'-animation take longer */
.navds-expansioncard__header[data-open="false"] .navds-expansioncard__header-chevron {
  transition-duration: 400ms;
}

/* -------------------------- ExpansionCard Content ------------------------- */
.navds-expansioncard__content {
  border-end-end-radius: var(--__axc-expansioncard-border-radius);
  border-end-start-radius: var(--__axc-expansioncard-border-radius);
  padding-inline: var(--__axc-expansioncard-padding-inline);
  padding-block: 0;
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  transition-property: visibility, padding-block, grid-template-rows;
  overflow: hidden;

  &[data-open="true"] {
    grid-template-rows: 1fr;
    visibility: visible;
    padding-block: var(--__axc-expansioncard-padding-block);

    & .navds-expansioncard__content-inner {
      opacity: 1;
    }
  }
}

.navds-expansioncard__content-inner {
  min-height: 0;
  opacity: 0;
  transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1);
}

/* ---------------- ExpansionCard No Animation (defaultOpen) ---------------- */
.navds-expansioncard--no-animation {
  & :is(.navds-expansioncard__content, .navds-expansioncard__content-inner) {
    transition: none;
  }
}
