@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-button-buttonFunction';
@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';

$sizes: 's', 'm', 'l';

$typography-primary: (
  's': styles-tokens-button-buttonFunction.$sans-label-m,
  'm': styles-tokens-button-buttonFunction.$sans-label-l,
  'l': styles-tokens-button-buttonFunction.$sans-title-m,
);

$typography-secondary: (
  's': styles-tokens-button-buttonFunction.$light-label-m,
  'm': styles-tokens-button-buttonFunction.$light-label-l,
  'l': styles-tokens-button-buttonFunction.$light-title-m,
);

$button-size: (
  's': 'xs',
  'm': 's',
  'l': 'm',
);

$containerSize: 1px;

.separatorWithLabel {
  display: flex;
  gap: styles-tokens-button-buttonFunction.$dimension-1m;
  align-items: flex-end;

  box-sizing: border-box;
  width: 100%;
  min-width: 100%;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include styles-tokens-button-buttonFunction.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'container-separator-subheader');

      .label {
        &[data-mode='primary'] {
          @include styles-tokens-button-buttonFunction.composite-var(styles-tokens-button-buttonFunction.simple-var($typography-primary, $size));
        }
        &[data-mode='secondary'] {
          @include styles-tokens-button-buttonFunction.composite-var(styles-tokens-button-buttonFunction.simple-var($typography-secondary, $size));
        }
      }
    }
  }
}

.separatorWithoutLabel {
  display: flex;
  align-items: flex-end;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include styles-tokens-button-buttonFunction.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'container-separator');
    }
  }

  box-sizing: border-box;
}

.label {
  overflow: hidden;
  flex-shrink: 1;

  &[data-mode='primary'] {
    color: styles-tokens-button-buttonFunction.$sys-neutral-text-main;
  }

  &[data-mode='secondary'] {
    color: styles-tokens-button-buttonFunction.$sys-neutral-text-light;
  }
}

hr.divider {
  flex: 1;
  width: auto;
  min-width: 0;
}

.selectButton {
  display: flex;
  justify-content: flex-end;

  &[data-weight='primary'] {
    --divider-height: #{$containerSize};
  }

  &[data-weight='secondary'] {
    --divider-height: #{calc($containerSize / 2)};
  }

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      transform: translateY(
        calc(
          (
              styles-tokens-button-buttonFunction.simple-var(
                  styles-tokens-button-buttonFunction.$button-function,
                  'container',
                  styles-tokens-button-buttonFunction.simple-var($button-size, $size),
                  'label-only',
                  'height'
                ) - styles-tokens-button-buttonFunction.simple-var(styles-tokens-button-buttonFunction.$theme-variables, 'sans', 'label', $size, 'line-height')
            ) / 2 - var(--divider-height, 0)
        )
      );
    }
  }
}