/* ==========================================================================
 * Accordion
 * ========================================================================== */

.mds-c-accordion {
  --mds-v-accordion__background-color: var(--mds-t-background-color--secondary);
  --mds-v-accordion__border-color: var(--mds-t-border-color--primary);
  --mds-v-accordion__color--secondary: var(--mds-t-text-color--secondary);
  --mds-v-accordion__color--accent: var(--mds-t-text-color--accent);
  --mds-v-accordion__icon-size: var(--mds-d-font-size--sm);
  --mds-v-accordion__tab-outline-color: var(--mds-t-text-color--accent);
  --mds-v-accordion__tab-spacing: var(--mds-d-spacing--sm);

  width: 100%;

  &:not(:last-child) {
    margin-bottom: var(--mds-d-spacing--xxl);
  }
}

.mds-c-accordion__tab {
  align-items: center;
  background-color: var(--mds-v-accordion__background-color);
  border-top: 1px solid var(--mds-v-accordion__border-color);
  cursor: pointer;
  display: flex;
  line-height: 1;
  padding: var(--mds-v-accordion__tab-spacing);
  text-align: left;
  width: 100%;
  z-index: 1;

  &[aria-expanded='false']:last-of-type {
    border-bottom: 1px solid var(--mds-v-accordion__border-color);
  }

  &:focus-visible {
    border-color: transparent;
    outline: 2px solid var(--mds-v-accordion__tab-outline-color);
    outline-offset: -2px;
    z-index: 2;
  }

  .mds-c-icon {
    color: var(--mds-v-accordion__color--secondary);
    font-size: var(--mds-v-accordion__icon-size);
    transition: transform 0.15s ease-out;

    [aria-expanded='true']& {
      transform: rotate(90deg);
    }
  }
}

.mds-c-accordion__title {
  color: var(--mds-v-accordion__color--secondary);
  font-size: var(--mds-d-font-size--med);

  &:not(:first-child) {
    padding-left: var(--mds-d-spacing--xs);
  }
}

.mds-c-accordion__panel {
  border-top: 1px solid var(--mds-v-accordion__border-color);
  display: none;
  line-height: 1;

  &[aria-hidden='false'] {
    display: block;
  }

  &:empty {
    border-top: 0;
  }
}