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

.containerBase {
  max-width: 100%;
  background-color: styles-tokens-accordion.$sys-neutral-background1-level;

  &:focus-within,
  &:hover {
    background-color: styles-tokens-accordion.$sys-neutral-background2-level;
  }

  &[data-shape='round'] {
    @include styles-tokens-accordion.composite-var(styles-tokens-accordion.$collapse-block, 'container', 'shape-round');
  }

  &[data-shape='square'] {
    @include styles-tokens-accordion.composite-var(styles-tokens-accordion.$collapse-block, 'container', 'shape-square');
  }
}

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

  &:focus-within,
  &:hover {
    box-shadow: styles-tokens-accordion.$box-shadow-elevation-level2;
  }
}

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

  border-width: 0;
  outline-color: styles-tokens-accordion.$sys-neutral-decor-default;
  outline-style: solid;
  outline-width: styles-tokens-accordion.$border-width-accordion-collapse-block-primary;

  &:focus-within,
  &:hover {
    outline-color: styles-tokens-accordion.$sys-neutral-decor-hovered;
  }
}