@use 'mixin' as *;
@use 'theme-variables' as *;

@include export-module('drop-down-button-layout-and-theme') {
  .sf-dropdown-btn {

    &.sf-caret-hide .sf-caret {
      display: none;
    }

    &.sf-drp-btn-sm {
      gap: $drop-down-btn-sm-gap;
      .sf-caret svg {
        width: $drop-down-btn-sm-icon-size;
        height: $drop-down-btn-sm-icon-size;
      }
    }
    &.sf-drp-btn-me {
      gap: $drop-down-btn-me-gap;
      .sf-caret svg {
        width: $drop-down-btn-me-icon-size;
        height: $drop-down-btn-me-icon-size;
      }
    }
    &.sf-drp-btn-la {
      gap: $drop-down-btn-la-gap;
      .sf-caret svg {
        width: $drop-down-btn-la-icon-size;
        height: $drop-down-btn-la-icon-size;
      }
    }
  }

  .sf-dropdown-popup {
    background: $drop-down-btn-ul-bgcolor;
    border-radius: $drop-down-btn-ul-border-radius;
    color: $drop-down-btn-color;
    position: absolute;

    ul {
      border-radius: $drop-down-btn-ul-border-radius;
      box-shadow: $drop-down-btn-parent-ul-box-shadow;
      box-sizing: border-box;
      margin: $drop-down-btn-parent-ul-margin;
      overflow: hidden;
      user-select: none;
      white-space: nowrap;

      .sf-item {
        cursor: pointer;
        display: flex;

        &.sf-separator {
          @include dropdown-separator();
        }

        .sf-menu-icon {
          float: left;
        }
      }
    }

    // Small size dropdown
    &.sf-drp-btn-sm {
      border-radius: $drop-down-btn-sm-ul-border-radius;
      ul {
        min-width: $drop-down-btn-sm-min-width;
        padding: $drop-down-btn-sm-ul-padding;
        font-size: $drop-down-btn-sm-font-size;
        border-radius: $drop-down-btn-sm-ul-border-radius;

        .sf-item {
          line-height: $drop-down-btn-sm-li-height;
          padding: $drop-down-btn-sm-li-padding;

          .sf-menu-icon {
            margin-inline-end: $drop-down-btn-sm-icon-margin-right;
            .sf-icon-size {
              height: $drop-down-btn-sm-menu-icon-size;
              width: $drop-down-btn-sm-menu-icon-size;
            }
          }
        }
      }
    }
    

    // Medium size dropdown
    &.sf-drp-btn-me ul {
      min-width: $drop-down-btn-me-min-width;
      padding: $drop-down-btn-me-ul-padding;
      font-size: $drop-down-btn-me-font-size;

      .sf-item {
        line-height: $drop-down-btn-me-li-height;
        padding: $drop-down-btn-me-li-padding;

        .sf-menu-icon {
          margin-inline-end: $drop-down-btn-me-icon-margin-right;
          .sf-icon-size {
            height: $drop-down-btn-me-menu-icon-size;
            width: $drop-down-btn-me-menu-icon-size;
          }
        }
      }
    }

    // Large size dropdown
    &.sf-drp-btn-la {
      border-radius: $drop-down-btn-la-ul-border-radius;
      ul {
        min-width: $drop-down-btn-la-min-width;
        padding: $drop-down-btn-la-ul-padding;
        font-size: $drop-down-btn-la-font-size;
        border-radius: $drop-down-btn-la-ul-border-radius;

        .sf-item {
          line-height: $drop-down-btn-la-li-height;
          padding: $drop-down-btn-la-li-padding;

          .sf-menu-icon {
            margin-inline-end: $drop-down-btn-la-icon-margin-right;
            .sf-icon-size {
              height: $drop-down-btn-la-menu-icon-size;
              width: $drop-down-btn-la-menu-icon-size;
            }
          }
        }
      }
    }
  }
}