.navds-read-more {
  --__axc-read-more-icon-size: 1.5rem;
  --__axc-read-more-pi-start: 0px;
  --__axc-read-more-pi-end: var(--ax-spacing-1);
  --__axc-read-more-pb: var(--ax-spacing-1);
}

/* ----------------------------- ReadMore Button ---------------------------- */
.navds-read-more__button {
  cursor: pointer;
  margin: 0;
  border: none;
  background: none;
  display: flex;
  align-items: flex-start;
  gap: var(--ax-spacing-1);
  color: var(--ax-text-accent);
  padding-inline: var(--__axc-read-more-pi-start) var(--__axc-read-more-pi-end);
  padding-block: var(--__axc-read-more-pb);
  text-align: start;

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

  &[data-state="open"] .navds-read-more__expand-icon {
    transform: rotateX(-180deg);
  }
}

.navds-read-more:is([data-volume="low"], :not([data-volume])) {
  & .navds-read-more__button {
    border-radius: var(--ax-border-radius-medium);

    &:hover {
      background-color: var(--ax-bg-neutral-hoverA);
      color: var(--ax-text-accent-strong);
    }
  }
}

.navds-read-more[data-volume="high"] {
  & .navds-read-more__button {
    background-color: var(--ax-bg-accent-moderate);
    border-radius: var(--ax-border-radius-full);

    &:hover {
      background-color: var(--ax-bg-accent-moderate-hoverA);
      color: var(--ax-text-accent-strong);
    }
  }

  &.navds-read-more--large {
    --__axc-read-more-pi-start: var(--ax-spacing-3);
    --__axc-read-more-pi-end: var(--ax-spacing-6);
  }

  &.navds-read-more--small,
  &.navds-read-more--medium {
    --__axc-read-more-pi-start: var(--ax-spacing-2);
    --__axc-read-more-pi-end: var(--ax-spacing-4);
  }
}

/* ---------------------------- ReadMore Content ---------------------------- */
.navds-read-more__content {
  margin-top: var(--ax-spacing-2);
  border-left: 2px solid var(--ax-border-neutral-subtleA);
  color: var(--ax-text-default);
  margin-left: calc(var(--__axc-read-more-pi-start) + var(--__axc-read-more-icon-size) / 2 - 1px);
  padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-spacing-1));

  &[data-state="closed"] {
    display: none;
  }
}

.navds-read-more__expand-icon {
  font-size: var(--__axc-read-more-icon-size);
  flex-shrink: 0;
  transition: transform 100ms cubic-bezier(0.2, 0, 0, 1);
}

/* ----------------------------- ReadMore Sizes ----------------------------- */
.navds-read-more--large {
  --__axc-read-more-pb: var(--ax-spacing-3);
}

.navds-read-more--small {
  --__axc-read-more-icon-size: 1.25rem;
  --__axc-read-more-pb: var(--ax-spacing-05);
}

/* ------------------------- ReadMore high-contrast ------------------------- */
@media (forced-colors: active) {
  .navds-read-more__button {
    background-color: ButtonFace;
    border: solid 1px ButtonText;
    color: ButtonText;
  }
}
