$tiny-vertical-padding: 12px;
$small-vertical-padding: 15px;
$medium-vertical-padding: 18px;

.selectable-accordion {
  background-color: var(
    --wds-selectable-accordion-fill,
    var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #ffffff))
  );

  & &__item {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  & &__item--hovered:not(#{&}__item--disabled) &__selector,
  & &__item--hovered:not(#{&}__item--disabled) &__header {
    background-color: var(
      --wds-color-fill-standard-tertiary-hover,
      var(--wsr-color-B50, #e7f0ff)
    );
  }

  & &__item--disabled &__selector,
  & &__item--disabled &__header {
    cursor: default;
    background-color: var(
      --wds-color-fill-standard-tertiary-disabled,
      var(--wsr-color-B60, #f4f7ff)
    );
  }

  & &__item:last-child &__divider {
    display: none;
  }

  & &__selector,
  & &__header {
    transition: background-color 0.3s;
  }

  & &__selector {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline-start: 24px;
    padding-inline-end: 18px;
  }

  & &__selector-toggle {
    display: flex;
  }

  & &__tooltip {
    pointer-events: none;
  }

  & &__header {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    padding-inline-start: 0;
    padding-inline-end: 24px;
  }

  & &__item--vertical-padding-medium &__header {
    padding-block-start: $medium-vertical-padding;
    padding-block-end: $medium-vertical-padding;
  }

  & &__item--vertical-padding-small &__header {
    padding-block-start: $small-vertical-padding;
    padding-block-end: $small-vertical-padding;
  }

  & &__item--vertical-padding-tiny &__header {
    padding-block-start: $tiny-vertical-padding;
    padding-block-end: $tiny-vertical-padding;
  }

  & &__content {
    grid-column-start: 2;
    grid-column-end: 2;
  }

  & &__text {
    overflow: hidden;
  }

  & &__inner {
    padding: 0 24px 18px 0;
  }

  & &__divider {
    padding-inline-end: 30px;
  }
}