@use 'theme-variables' as *;

@include export-module('button-layout') {

  .sf-btn {
    border: $btn-border;
    letter-spacing: $btn-letter-spacing;
    cursor: pointer;
    position: relative;
    justify-content: center;
    display: inline-flex;
    text-align: center;
    user-select: none;
    white-space: normal;
    font-weight: $btn-font-weight;

    &.sf-btn-me {
      font-size: $btn-medium-font-size;
      border-radius: $btn-medium-radius;
      svg {
        font-size: $btn-svg-font-size;
      }
    }

    &.sf-btn-la {
      font-size: $btn-large-font-size;
      border-radius: $btn-large-radius;
      svg {
        font-size: $btn-large-svg-font-size;
      }
    }

    &.sf-btn-sm {
      font-size: $btn-small-font-size;
      border-radius: $btn-small-radius;
      svg {
        font-size: $btn-small-svg-font-size;
      }
    }
  }

  .sf-btn-vertical {
    flex-direction: column;
    padding: $btn-vertical-padding;
  }

  .sf-btn-la:not(.sf-icon-btn) {
    gap: $btn-large-text-gap;
  }

  .sf-btn-sm:not(.sf-icon-btn) {
    gap: $btn-small-text-gap;
  }

  .sf-btn-me:not(.sf-icon-btn) {
    gap: $btn-medium-text-gap;
  }

  .sf-btn-la:not(.sf-icon-btn):not(.sf-btn-vertical) {
    padding: $btn-large-horizontal-padding;
  }

  .sf-btn-sm:not(.sf-icon-btn):not(.sf-btn-vertical) {
    padding: $btn-small-horizontal-padding;
  }

  .sf-btn-me:not(.sf-icon-btn):not(.sf-btn-vertical) {
    padding: $btn-medium-horizontal-padding;
  }
  
  .sf-btn svg {
    display: block;
  }
  
  .sf-btn:hover, .sf-btn:focus {
    text-decoration: none;
  }
  
  .sf-icon-btn.sf-icon-btn-sm {
    padding: $btn-small-icon-padding;
  }
  
  .sf-icon-btn.sf-icon-btn-me {
    padding: $btn-medium-icon-padding;
  }
  
  .sf-icon-btn.sf-icon-btn-la {
    padding: $btn-large-icon-padding;
  }
  
  .sf-btn-sm:not(.sf-btn-vertical) {
    line-height: $btn-small-line-height;
  }
  
  .sf-btn-me:not(.sf-btn-vertical) {
    line-height: $btn-medium-line-height;
  }

  .sf-btn-la:not(.sf-btn-vertical) {
    line-height: $btn-large-line-height;
  }
  
  .sf-rtl.sf-btn-top {
    flex-direction: column-reverse;
  }
  
  .sf-rtl.sf-btn-bottom {
    flex-direction: column;
  }
}