@use 'theme-variables' as *;

@mixin split-button-bottom-radius ($start-start: 0, $start-end: 0, $end-end: 0, $end-start: 0) {
  border-start-start-radius: $start-start;
  border-start-end-radius: $start-end;
  border-end-start-radius: $end-start;
  border-end-end-radius: $end-end;
}

@include export-module('split-button-layout-and-theme') {
  .sf-split-btn-wrapper {
    display: inline-flex;
    white-space: nowrap;
    width: min-content;
    border-radius: $split-btn-border-radius;
    gap: $split-btn-gap;

    .sf-btn-vertical+.sf-dropdown-btn {
      height: auto;
    }

    .sf-split-btn,
    .sf-dropdown-btn {

      &:focus {
        outline-offset: $split-btn-focus-outline-offset;
      }

      &:disabled {

        &:focus,
        &:hover,
        &:active {
          z-index: 0;
        }
      }
    }

    .sf-split-btn {
      text-transform: none;
    }

    .sf-dropdown-btn {
      transition: border-radius 0.25s ease-in;
      z-index: 1;

      &.sf-btn {
        border-width: $split-btn-dropdown-border-width;
        border-inline-start-width: $split-btn-dropdown-border-inline-start-width;
      }
    }

    &.sf-split-btn-sm {

      .sf-split-btn {
        @include split-button-bottom-radius($split-btn-sm-border-radius, $split-btn-topleft-border-radius, $split-btn-topleft-border-radius, $split-btn-sm-border-radius);
        padding-inline: $split-btn-sm-inline-padding;
      }

      .sf-dropdown-btn {
        padding-block: $split-btn-dropdown-sm-padding-block;
        padding-inline: $split-btn-dropdown-sm-padding-inline;
        @include split-button-bottom-radius($split-btn-topleft-border-radius, $split-btn-sm-border-radius, $split-btn-sm-border-radius, $split-btn-topleft-border-radius);

        &.sf-active {
          border-radius: $split-btn-sm-active-border-radius;
        }
      }
    }

    &.sf-split-btn-me {

      .sf-split-btn {
        @include split-button-bottom-radius($split-btn-border-radius, $split-btn-topleft-border-radius, $split-btn-topleft-border-radius, $split-btn-border-radius);
        padding-inline: $split-btn-me-inline-padding;
      }

      .sf-dropdown-btn {
        padding-block: $split-btn-dropdown-me-padding-block;
        padding-inline: $split-btn-dropdown-me-padding-inline;
        @include split-button-bottom-radius($split-btn-topleft-border-radius, $split-btn-border-radius, $split-btn-border-radius, $split-btn-topleft-border-radius);

        &.sf-active {
          border-radius: $split-btn-me-active-border-radius;
        }
      }
    }

    &.sf-split-btn-la {
      .sf-split-btn {
        @include split-button-bottom-radius($split-btn-la-border-radius, $split-btn-topleft-border-radius, $split-btn-topleft-border-radius, $split-btn-la-border-radius);
        padding-inline: $split-btn-la-inline-padding;
      }

      .sf-dropdown-btn {
        padding-block: $split-btn-dropdown-la-padding-block;
        padding-inline: $split-btn-dropdown-la-padding-inline;
        @include split-button-bottom-radius($split-btn-topleft-border-radius, $split-btn-la-border-radius, $split-btn-la-border-radius, $split-btn-topleft-border-radius);

        &.sf-active {
          border-radius: $split-btn-la-active-border-radius;
        }
      }
    }
  }
}