.amplify-expander {
  display: block;
  background-color: var(--amplify-components-expander-background-color);
  border-radius: var(--amplify-components-expander-border-radius);
  box-shadow: var(--amplify-components-expander-box-shadow);
  width: var(--amplify-components-expander-width);
}

.amplify-expander__item {
  display: block;
  overflow: hidden;
  box-shadow: var(--amplify-components-expander-item-box-shadow);

  &:first-of-type {
    border-start-start-radius: var(
      --amplify-components-expander-item-border-start-start-radius
    );
    border-start-end-radius: var(
      --amplify-components-expander-item-border-start-end-radius
    );

    // required for Safari 14 and below
    // see: https://caniuse.com/mdn-css_properties_border-end-end-radius
    @supports not (
      border-start-start-radius:
        var(--amplify-components-expander-item-border-start-start-radius)
    ) {
      border-top-left-radius: var(
        --amplify-components-expander-item-border-top-left-radius
      );
      border-top-right-radius: var(
        --amplify-components-expander-item-border-top-right-radius
      );
    }
  }

  &:last-of-type {
    box-shadow: none;
    border-end-start-radius: var(
      --amplify-components-expander-item-border-end-start-radius
    );
    border-end-end-radius: var(
      --amplify-components-expander-item-border-end-end-radius
    );

    // required for Safari 14 and below
    // see: https://caniuse.com/mdn-css_properties_border-end-end-radius
    @supports not (
      border-end-start-radius:
        var(--amplify-components-expander-item-border-end-start-radius)
    ) {
      border-bottom-left-radius: var(
        --amplify-components-expander-item-border-bottom-left-radius
      );
      border-bottom-right-radius: var(
        --amplify-components-expander-item-border-bottom-right-radius
      );
    }
  }

  &:focus-within {
    box-shadow: var(--amplify-components-expander-item-focus-box-shadow);
  }
}

.amplify-expander__header {
  display: flex;
  box-shadow: var(--amplify-components-expander-header-box-shadow);
}

.amplify-expander__trigger {
  flex: 1;
  display: flex;
  min-height: var(--amplify-components-expander-trigger-min-height);
  padding-inline-start: var(
    --amplify-components-expander-trigger-padding-inline-start
  );
  padding-inline-end: var(
    --amplify-components-expander-trigger-padding-inline-end
  );
  align-items: var(--amplify-components-expander-trigger-align-items);
  justify-content: var(--amplify-components-expander-trigger-justify-content);

  &:hover {
    background-color: var(
      --amplify-components-expander-trigger-hover-background-color
    );
  }
}

.amplify-expander__content {
  display: block;
  padding-inline-start: var(
    --amplify-components-expander-content-padding-inline-start
  );
  padding-inline-end: var(
    --amplify-components-expander-content-padding-inline-end
  );

  &[data-state='open'] {
    animation-name: amplify-expander-slide-down;
    animation-duration: var(
      --amplify-components-expander-content-open-animation-duration
    );
    animation-timing-function: var(
      --amplify-components-expander-content-open-animation-timing-function
    );
  }

  &[data-state='closed'] {
    animation-name: amplify-expander-slide-up;
    animation-duration: var(
      --amplify-components-expander-content-closed-animation-duration
    );
    animation-timing-function: var(
      --amplify-components-expander-content-closed-animation-timing-function
    );
  }
}

.amplify-expander__content__text {
  display: block;
  color: var(--amplify-components-expander-content-text-color);
  padding-block-start: var(
    --amplify-components-expander-content-text-padding-block-start
  );
  padding-block-end: var(
    --amplify-components-expander-content-text-padding-block-end
  );
}

.amplify-expander__icon {
  transition-property: transform;
  transition-duration: var(
    --amplify-components-expander-icon-transition-duration
  );
  transition-timing-function: var(
    --amplify-components-expander-icon-transition-timing-function
  );

  [data-state='open'] & {
    transform: rotate(180deg);
  }
}

@keyframes amplify-expander-slide-down {
  from {
    height: 0;
  }
  to {
    height: auto;
  }
}

@keyframes amplify-expander-slide-up {
  from {
    height: auto;
  }
  to {
    height: 0;
  }
}