@mixin icon-top-bottom {
  display: block;
  margin-top: 0;
  width: auto;
}

@mixin top-bottom-icon-btn {
  line-height: 1;
}

@mixin mat3-border-radius {
  @if $skin-name == 'Material3' {
    border-radius: 4px;
  }
}

@include export-module('button-layout') {
  .sf-btn,
  .sf-css.sf-btn {
    /* stylelint-disable property-no-vendor-prefix */
    position: relative;
    align-items: center;
    display: flex;
    -webkit-font-smoothing: antialiased;
    border: $btn-border;
    border-radius: $btn-border-radius;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-family: $font-family;
    font-size: $btn-font-size;
    font-weight: $btn-font-weight;
    justify-content: center;
    line-height: $btn-text-line-height;
    outline: none;
    padding: $btn-padding;
    text-align: center;
    text-decoration: none;
    text-transform: $btn-text-transform;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    @if $skin-name == 'Material3' {
      letter-spacing: .15px;
    }
    @at-root {
      &:disabled {
        cursor: default;
      }

      &:hover,
      &:focus {
        text-decoration: none;
      }

      &::-moz-focus-inner {
        border: 0;
        padding: 0;
      }

      & .sf-btn-icon {
        display: inline-block;
        font-size: $btn-icon-font-size;
        margin-top: $btn-icon-margin-top;
        vertical-align: middle;
        width: $btn-icon-btn-width;
        line-height: 1px;

        &.sf-icon-left {
          padding-right: 8px;
          margin-left: $btn-icon-margin;
          width: $btn-icon-width;
        }

        &.sf-icon-right {
          width: $btn-icon-width;
          margin-right: $btn-icon-margin;
        }

        &.sf-icon-top {
          padding-bottom: $btn-icon-top-bottom-padding;
          @include icon-top-bottom;
        }

        &.sf-icon-bottom {
          padding-top: $btn-icon-top-bottom-padding;
          @include icon-top-bottom;
        }

        path {
          fill-rule: evenodd;
          clip-rule: evenodd;
        }
      }

      &.sf-icon-btn {
        @if $skin-name != 'tailwind3' {
          padding: $btn-icon-padding;
        }
        @if $skin-name == 'fluent2' {
          line-height: 14px;
        }
        @include mat3-border-radius;
      }

      &.sf-top-icon-btn,
      &.sf-bottom-icon-btn {
        @include top-bottom-icon-btn;
        padding: $btn-top-icon-padding;
      }

      &.sf-round {
        border-radius: 50%;
        height: $btn-round-height;
        line-height: 1;
        padding: 0;
        width: $btn-round-width;

        & .sf-btn-icon {
          font-size: $btn-round-font-size;
          line-height: $btn-round-icon-line-height;
          margin-top: 0;
          width: auto;
        }
      }

      &.sf-rounded {
        border-radius: 40px;
      }

      &.sf-round-corner {
        @if $skin-name == 'Material3' {
          border-radius: 25px;
          padding: $btn-padding;
        }
      }

      &.sf-rtl {
        & .sf-icon-right {
          margin-left: $btn-icon-margin;
          margin-right: 0;
        }

        & .sf-icon-left {
          margin-left: 0;
          margin-right: $btn-icon-margin;
        }
      }

      &.sf-flat {
        border: $btn-flat-border;
      }

      &.sf-small {
        font-size: $btn-small-font-size;
        line-height: $btn-small-text-line-height;
        padding: $btn-small-padding;
        &.sf-round-corner {
          @if $skin-name == 'Material3' {
            border-radius: 25px;
            padding: $btn-small-padding;
          }
        }

        & .sf-btn-icon {
          font-size: $btn-small-icon-font-size;
          width: $btn-icon-small-width;

          &.sf-icon-left {
            margin-left: $btn-small-icon-margin;
            width: $btn-small-icon-width;
          }

          &.sf-icon-right {
            margin-right: $btn-small-icon-margin;
            width: $btn-small-icon-width;
          }

          &.sf-icon-top {
            padding-bottom: $btn-small-icon-top-bottom-padding;
            width: auto;
          }

          &.sf-icon-bottom {
            padding-top: $btn-small-icon-top-bottom-padding;
            width: auto;
          }
        }

        &.sf-icon-btn {
          padding: $btn-small-icon-padding;
          @include mat3-border-radius;
        }

        &.sf-top-icon-btn,
        &.sf-bottom-icon-btn {
          @include top-bottom-icon-btn;
          padding: $btn-top-icon-padding;
        }

        &.sf-round {
          height: $btn-round-small-height;
          line-height: 1;
          padding: 0;
          width: $btn-round-small-width;
          @if $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' {
            border-radius: 50%;
          }

          & .sf-btn-icon {
            font-size: $btn-small-round-font-size;
            line-height: $btn-small-round-icon-line-height;
            width: auto;
          }
        }

        &.sf-rtl {
          & .sf-icon-right {
            margin-left: $btn-small-icon-margin;
            margin-right: 0;
          }

          & .sf-icon-left {
            margin-left: 0;
            margin-right: $btn-small-icon-margin;
          }
        }
      }

      &.sf-block {
        display: block;
        width: 100%;
      }
    }

    &.sf-outlined.sf-link {
      border-radius: 4px;
    }
  }

  .sf-small .sf-btn,
  .sf-small.sf-btn,
  .sf-small .sf-css.sf-btn,
  .sf-small.sf-css.sf-btn {
    font-size: $btn-small-font-size;
    line-height: $btn-small-text-line-height;
    padding: $btn-small-padding;
    &.sf-round-corner {
      @if $skin-name == 'Material3' {
        border-radius: 25px;
        padding: $btn-small-padding;
      }
    }

    & .sf-btn-icon {
      font-size: $btn-small-icon-font-size;
      width: $btn-icon-small-width;

      &.sf-icon-left {
        margin-left: $btn-small-icon-margin;
        width: $btn-small-icon-width;
      }

      &.sf-icon-right {
        margin-right: $btn-small-icon-margin;
        width: $btn-small-icon-width;
      }

      &.sf-icon-top {
        padding-bottom: $btn-small-icon-top-bottom-padding;
        width: auto;
      }

      &.sf-icon-bottom {
        padding-top: $btn-small-icon-top-bottom-padding;
        width: auto;
      }
    }

    &.sf-icon-btn {
      padding: $btn-small-icon-padding;
      @if $skin-name == 'fluent2' {
        line-height: 14px;
      }
      @include mat3-border-radius;
    }

    &.sf-top-icon-btn,
    &.sf-bottom-icon-btn {
      @include top-bottom-icon-btn;
      padding: $btn-top-icon-padding;
    }

    &.sf-round {
      height: $btn-round-small-height;
      line-height: 1;
      padding: 0;
      width: $btn-round-small-width;
      @if $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' {
        border-radius: 50%;
      }

      & .sf-btn-icon {
        font-size: $btn-small-round-font-size;
        line-height: $btn-small-round-icon-line-height;
        width: auto;
      }
    }

    &.sf-rtl {
      & .sf-icon-right {
        margin-left: $btn-small-icon-margin;
        margin-right: 0;
      }

      & .sf-icon-left {
        margin-left: 0;
        margin-right: $btn-small-icon-margin;
      }
    }
  }

  @if $skin-name == 'fluent2' {
    .sf-btn.sf-icon-btn .sf-btn-icon,
    .sf-small .sf-btn.sf-icon-btn .sf-btn-icon {
      font-size: 14px;
      line-height: 14px;
    }
  }
}

.sf-btn.sf-bottom,
.sf-btn.sf-top {
  flex-direction: column;
}

@include export-module('button-bigger') {
  .sf-large.sf-small .sf-btn,
  .sf-large .sf-small.sf-btn,
  .sf-large.sf-small .sf-css.sf-btn,
  .sf-large .sf-small.sf-css.sf-btn {
    font-size: $btn-bigger-small-font-size;
    line-height: $btn-bigger-small-text-line-height;
    padding: $btn-bigger-small-padding;

    &.sf-round-corner {
      @if $skin-name == 'Material3' {
        border-radius: 25px;
        padding: $btn-bigger-small-padding;
      }
    }

    & .sf-btn-icon {
      font-size: $btn-bigger-small-icon-font-size;
      width: $btn-icon-bigger-small-width;

      &.sf-icon-left {
        margin-left: $btn-bigger-small-icon-margin;
        width: $btn-bigger-small-icon-width;
      }

      &.sf-icon-right {
        margin-right: $btn-bigger-small-icon-margin;
        width: $btn-bigger-small-icon-width;
      }

      &.sf-icon-top {
        padding-bottom: $btn-small-icon-top-bottom-padding;
        width: auto;
      }

      &.sf-icon-bottom {
        padding-top: $btn-small-icon-top-bottom-padding;
        width: auto;
      }
    }

    &.sf-icon-btn {
      padding: $btn-bigger-small-icon-padding;
      @include mat3-border-radius;
    }

    &.sf-top-icon-btn,
    &.sf-bottom-icon-btn {
      @include top-bottom-icon-btn;
      padding: $btn-top-icon-bigger-padding;
    }

    &.sf-round {
      height: $btn-round-bigger-small-height;
      line-height: 1;
      padding: 0;
      width: $btn-round-bigger-small-width;

      & .sf-btn-icon {
        font-size: $btn-bigger-small-round-font-size;
        line-height: $btn-bigger-small-round-icon-line-height;
        width: auto;
      }
    }

    &.sf-rtl {
      & .sf-icon-right {
        margin-left: $btn-bigger-small-icon-margin;
        margin-right: 0;
      }

      & .sf-icon-left {
        margin-left: 0;
        margin-right: $btn-bigger-small-icon-margin;
      }
    }
  }

  .sf-large .sf-btn,
  .sf-large.sf-btn,
  .sf-large .sf-css.sf-btn,
  .sf-large.sf-css.sf-btn {
    font-size: $btn-bigger-font-size;
    line-height: $btn-bigger-text-line-height;
    padding: $btn-bigger-padding;
    &.sf-round-corner {
      @if $skin-name == 'Material3' {
        border-radius: 25px;
        padding: $btn-bigger-padding;
      }
    }

    & .sf-btn-icon {
      font-size: $btn-bigger-icon-font-size;
      width: $btn-icon-bigger-width;

      &.sf-icon-left {
        margin-left: $btn-bigger-icon-margin;
        width: $btn-bigger-icon-width;
      }

      &.sf-icon-right {
        margin-right: $btn-bigger-icon-margin;
        width: $btn-bigger-icon-width;
      }

      &.sf-icon-top {
        padding-bottom: $btn-bigger-icon-top-bottom-padding;
        width: auto;
      }

      &.sf-icon-bottom {
        padding-top: $btn-bigger-icon-top-bottom-padding;
        width: auto;
      }
    }

    &.sf-icon-btn {
      @if $skin-name != 'tailwind3' {
        padding: $btn-bigger-icon-padding;
      }
      @if $skin-name == 'fluent2' {
        line-height: 16px;
      }
      @include mat3-border-radius;
    }

    &.sf-top-icon-btn,
    &.sf-bottom-icon-btn {
      @include top-bottom-icon-btn;
      padding: $btn-top-icon-bigger-padding;
    }

    &.sf-round {
      height: $btn-round-bigger-height;
      line-height: 1;
      padding: 0;
      width: $btn-round-bigger-width;
      @if $skin-name == 'Material3' {
        border-radius: 50%;
      }

      & .sf-btn-icon {
        font-size: $btn-bigger-round-font-size;
        line-height: $btn-bigger-round-icon-line-height;
        width: auto;
      }
    }

    &.sf-rtl {
      & .sf-icon-right {
        margin-left: $btn-bigger-icon-margin;
        margin-right: 0;
      }

      & .sf-icon-left {
        margin-left: 0;
        margin-right: $btn-bigger-icon-margin;
      }
    }

    &.sf-small {
      font-size: $btn-bigger-small-font-size;
      line-height: $btn-bigger-small-text-line-height;
      padding: $btn-bigger-small-padding;

      &.sf-round-corner {
        @if $skin-name == 'Material3' {
          border-radius: 25px;
          padding: $btn-bigger-small-padding;
        }
      }

      & .sf-btn-icon {
        font-size: $btn-bigger-small-icon-font-size;
        width: $btn-icon-bigger-small-width;

        &.sf-icon-left {
          margin-left: $btn-bigger-small-icon-margin;
          width: $btn-bigger-small-icon-width;
        }

        &.sf-icon-right {
          margin-right: $btn-bigger-small-icon-margin;
          width: $btn-bigger-small-icon-width;
        }

        &.sf-icon-top {
          padding-bottom: $btn-small-icon-top-bottom-padding;
          width: auto;
        }

        &.sf-icon-bottom {
          padding-top: $btn-small-icon-top-bottom-padding;
          width: auto;
        }
      }

      &.sf-icon-btn {
        padding: $btn-bigger-small-icon-padding;
        @include mat3-border-radius;
      }

      &.sf-top-icon-btn,
      &.sf-bottom-icon-btn {
        @include top-bottom-icon-btn;
        padding: $btn-top-icon-bigger-padding;
      }

      &.sf-round {
        height: $btn-round-bigger-small-height;
        line-height: 1;
        padding: 0;
        width: $btn-round-bigger-small-width;
        @if $skin-name == 'Material3' {
          border-radius: 50%;
        }

        & .sf-btn-icon {
          font-size: $btn-bigger-small-round-font-size;
          line-height: $btn-bigger-small-round-icon-line-height;
          width: auto;
        }
      }

      &.sf-rtl {
        & .sf-icon-right {
          margin-left: $btn-bigger-small-icon-margin;
          margin-right: 0;
        }

        & .sf-icon-left {
          margin-left: 0;
          margin-right: $btn-bigger-small-icon-margin;
        }
      }
    }
  }
}