@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-accordion';

.button {
  &[data-expanded] {
    svg {
      transform: rotate(180deg);
    }
  }
}

.header {
  @include styles-tokens-accordion.composite-var(styles-tokens-accordion.$collapse-block-container-header-container);

  cursor: pointer;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  margin: calc(0px - var(--accordion-header-padding-vertical, 0px)) calc(0px - var(--accordion-header-padding-horizontal, 0px));
  padding: var(--accordion-header-padding-vertical, 0px) var(--accordion-header-padding-horizontal, 0px);
  
  > * {
    cursor: pointer;
  }

  &:hover {
    .button  { 
      span {
        color: styles-tokens-accordion.$sys-neutral-accent-hovered;
      }
    }
  }
}

.text {
  display: flex;
  flex-direction: column;
  max-width: calc(100% - var(--width, 0px) - styles-tokens-accordion.$space-accordion-collapse-block-title-gap);
}

.functionLayout {
  @include styles-tokens-accordion.composite-var(styles-tokens-accordion.$collapse-block-container-header-function-layout);

  display: flex;
  flex-shrink: 0;
}