:host {
  border-radius: var(--ld-accordion-border-radius);
  display: block;
  position: relative;
  z-index: 1;
}

.ld-accordion-toggle__button,
.ld-accordion-toggle__label,
.ld-accordion-toggle__trigger {
  margin: 0;
  border: 0;
  box-sizing: border-box;
  text-align: left;
  touch-action: manipulation;
  user-select: none;
  width: 100%;
  -webkit-touch-callout: none;
}

.ld-accordion-toggle__button {
  background-color: var(--ld-accordion-bg-col);
  align-items: center;
  border-radius: inherit;
  color: var(--ld-accordion-col);
  display: grid;
  font: var(--ld-typo-body-m);
  grid-template-columns: 1fr var(--ld-accordion-toggle-size);
  direction: var(--ld-accordion-grid-dir);
  padding: 0;
  position: relative;

  &[aria-disabled] {
    color: var(--ld-accordion-col-disabled);
  }

  :host(.ld-accordion-toggle:not(.ld-accordion-toggle--split)) & {
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: var(--ld-accordion-border-radius);
      background-color: var(--ld-accordion-toggle-indicator-bg-col);
    }
    &:not(
        [aria-disabled]:not([aria-disabled='']:not([aria-disabled='false']))
      ) {
      &:where(:focus:focus-visible) {
        --ld-accordion-toggle-indicator-bg-col: var(
          --ld-accordion-bg-col-focus
        );
      }
      @media (hover: hover) {
        &:where(:hover) {
          --ld-accordion-toggle-indicator-bg-col: var(
            --ld-accordion-bg-col-hover
          );
        }
      }
      &:where(:active),
      &:where(:active:focus-visible) {
        --ld-accordion-toggle-indicator-bg-col: var(
          --ld-accordion-bg-col-active
        );
      }
    }
  }

  :host(.ld-accordion-toggle--expanded:not(.ld-accordion-toggle--split)) & {
    &::before {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  :host(
      .ld-accordion-toggle:not(
          .ld-accordion-toggle--split,
          .ld-accordion-toggle--expanded
        )
    )
    & {
    &:not(
        [aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
      ) {
      &:where(:focus:focus-visible) {
        --ld-accordion-toggle-col: var(--ld-accordion-col-focus);
      }
      @media (hover: hover) {
        &:where(:hover) {
          --ld-accordion-toggle-col: var(--ld-accordion-col-hover);
        }
      }
      &:where(:active),
      &:where(:active:focus-visible) {
        --ld-accordion-toggle-col: var(--ld-accordion-col-active);
      }
    }
  }

  &:not(
      [aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
    ) {
    .ld-accordion-toggle__trigger {
      color: var(--ld-accordion-trigger-icon-col);
    }
  }
}

.ld-accordion-toggle__label,
.ld-accordion-toggle__trigger {
  font: inherit;
  background-color: transparent;
}

button.ld-accordion-toggle__button,
button.ld-accordion-toggle__label,
button.ld-accordion-toggle__trigger {
  &:not(
      [aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
    ) {
    cursor: pointer;
  }
}

.ld-accordion-toggle__label {
  position: relative;
  padding: var(--ld-accordion-padding-y) var(--ld-accordion-padding-x);
  border-radius: var(--ld-accordion-border-radius);
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.ld-accordion-toggle__trigger {
  position: relative;
  width: var(--ld-accordion-toggle-size);
  height: var(--ld-accordion-toggle-size);
  display: grid;
  place-items: center;
  border-radius: var(--ld-accordion-border-radius);
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  overflow: hidden; /* resolves focus outline issue on safari */
}

.ld-accordion-toggle__label-content,
.ld-accordion-toggle__trigger-content {
  position: relative;
  display: grid;
  transform: translateX(calc(-1 * var(--ld-sp-1)));
}

.ld-accordion-toggle__label-content {
  .ld-accordion-toggle__label:not(
      [aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
    )
    & {
    color: var(--ld-accordion-toggle-col);
  }
}

:host(.ld-accordion-toggle--expanded) {
  --ld-accordion-toggle-col: var(--ld-accordion-toggle-expanded-col);

  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

  .ld-accordion-toggle__trigger-icon {
    transform: scaleY(-1);
  }
}

:host(.ld-accordion-toggle--split) {
  .ld-accordion-toggle__label,
  .ld-accordion-toggle__trigger {
    &::before {
      content: '';
      position: absolute;
      inset: var(--ld-sp-4);
      left: var(--ld-sp-2);
      border-radius: var(--ld-br-s);
    }

    &[aria-disabled] {
      color: var(--ld-accordion-col-disabled);
    }
  }

  .ld-accordion-toggle__label::before {
    background-color: var(--ld-accordion-toggle-label-indicator-bg-col);
    transform: translateX(calc(var(--ld-sp-2)));
  }

  .ld-accordion-toggle__trigger::before {
    background-color: var(--ld-accordion-toggle-trigger-indicator-bg-col);
  }

  .ld-accordion-toggle__button:not(
      [aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
    ) {
    background-color: var(--ld-accordion-bg-col);
  }

  .ld-accordion-toggle__label:not(
      [aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
    ) {
    &:where(:focus:focus-visible) {
      --ld-accordion-toggle-label-indicator-bg-col: var(
        --ld-accordion-bg-col-focus
      );
    }
    @media (hover: hover) {
      &:where(:hover) {
        --ld-accordion-toggle-label-indicator-bg-col: var(
          --ld-accordion-bg-col-hover
        );
      }
    }
    &:where(:active),
    &:where(:active:focus-visible) {
      --ld-accordion-toggle-label-indicator-bg-col: var(
        --ld-accordion-bg-col-active
      );
    }
  }

  .ld-accordion-toggle__trigger:not(
      [aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
    ) {
    &:where(:focus:focus-visible) {
      --ld-accordion-toggle-trigger-col: var(--ld-accordion-col-focus);
      --ld-accordion-toggle-trigger-indicator-bg-col: var(
        --ld-accordion-bg-col-focus
      );
    }
    @media (hover: hover) {
      &:where(:hover) {
        --ld-accordion-toggle-trigger-col: var(--ld-accordion-col-hover);
        --ld-accordion-toggle-trigger-indicator-bg-col: var(
          --ld-accordion-bg-col-hover
        );
      }
    }
    &:where(:active),
    &:where(:active:focus-visible) {
      --ld-accordion-toggle-trigger-col: var(--ld-accordion-col-active);
      --ld-accordion-toggle-trigger-indicator-bg-col: var(
        --ld-accordion-bg-col-active
      );
    }
  }
}

.ld-accordion-toggle__content {
  display: contents;
}
