@use "sb-element/core/spacing";
@use "sb-element/core/transitioning";
@use "sb-element/core/display";
@use "sb-element/core/border";
/*****************************************************************************
Checkbox-Group / Style
******************************************************************************/

// SIZE
@mixin select-button-size($size, $value) {
  &.sb--#{$size} button {
    height: $value;
    width: calc($value * 5);
  }

  &.sb--#{$size} &__options {
    max-height: calc(3 * $value);
  }

  &.sb--#{$size} &__option {
    height: $value;
    width: calc($value * 5);
  }
  @include select-button-pill($size, $value);
}

// SIZE
@mixin select-button-pill($size, $value) {
  &.sb--#{$size}.pill &__options {
    border-bottom-left-radius: calc($value / 2);
    border-bottom-right-radius: calc($value / 2);
  }
}

// ROOT
.sb-select-button {
  display: block;
  position: relative;
  cursor: pointer;

  $button-animation-duration: 300ms;
  $options-animation-duration: 100ms;

  button {
    transition-delay: $options-animation-duration;
    @include transitioning.ease($button-animation-duration,
      background,
      color,
      border-radius
    );
    @include display.flex($justify: space-evenly);
  }

  .sb-icon {
    @include transitioning.ease($button-animation-duration, color, transform);
  }

  &__options {
    overflow-x: hidden;
    overflow-y: auto;
    transform-origin: top;
    position: absolute;
    transform: scaleY(0);
    z-index: 3;
    @include border.radius-bottom-left(s);
    @include border.radius-bottom-right(s);
    @include transitioning.ease($options-animation-duration, transform);
  }

  &__option {
    @include display.flex();
    @include transitioning.ease(300ms, background, color);
  }

  &.open {
    button {
      border-bottom-left-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
      @include transitioning.ease($button-animation-duration,
        background,
        color,
        border-radius
      );
    }

    .sb-icon {transform: rotate(180deg);}
  }

  &.open &__options {
    transition-delay: $button-animation-duration;
    transform: scaleY(1);
  }

  @include spacing.for-each-size using ($size, $value) {
    @include select-button-size($size, $value);
  }
}