@import "./mixins/mixins.scss";
@import "./themes/vars.scss";

@include themes-mixin {
  @include b(popover-content) {
    @include b(dropdown-submenu-activator) {
      @include e(arrow) {
        fill: $--dropdown-item-suffix-fill;
      }
    }
    @include b(dropdown-menu) {
      @include m(as-menu-popover) {
        @include b(base-select-menu) {
          @include once {
            padding: 4px 0;
          }
          @include b(dropdown-item) {
            @include once {
              &:first-child {
                margin-top: 0;
              }
              &:last-child {
                margin-bottom: 0;
              }
              margin: 4px 0;
            }
            &:hover {
              color: map-get($--dropdown-item-text-color, 'hover');
              & > {
                @include b(dropdown-submenu-activator) {
                  @include b(icon) {
                    fill: map-get($--dropdown-item-text-color, 'hover');
                  }
                }
              }
            }
            @include m(selected) {
              color: map-get($--dropdown-item-text-color, 'selected');
              background-color: map-get($--dropdown-item-background-color, 'selected');
            }
            @include m(as-submenu) {
              background-color: transparent;
            }
          }
        }
      }
    }
    @include once {
      position: relative;
      @include b(dropdown-submenu-activator) {
        display: inline-block;
        display: flex;
        align-items: center;
        justify-content: space-between;
        @include e(arrow) {
          position: relative;
          right: -8px;
        }
      }
      @include b(dropdown-menu) {
        outline: none;
        @include b(base-select-menu) {
          margin-top: 0;
          margin-bottom: 0;
          @include m(small-size) {
            @include b(base-select-menu-option-wrapper) {
              padding-top: 4px;
              padding-bottom: 4px;
            }
            @include b(dropdown-item) {
              padding: 0 20px;
            }
            @include b(dropdown-divider) {
              margin: 0 0;
            }
            @include b(dropdown-submenu-activator) {
              @include e(arrow) {
                font-size: 16px;
                margin-left: 12px;
              }
            }
          }
          @include m(medium-size) {
            @include b(base-select-menu-option-wrapper) {
              padding-top: 4px;
              padding-bottom: 4px;
            }
            @include b(dropdown-item) {
              padding: 0 20px;
            }
            @include b(dropdown-divider) {
              margin: 0 0;
            }
            @include b(dropdown-submenu-activator) {
              @include e(arrow) {
                font-size: 16px;
                margin-left: 16px;
              }
            }
          }
          @include m(large-size) {
            @include b(base-select-menu-option-wrapper) {
              padding-top: 6px;
              padding-bottom: 6px;
            }
            @include b(dropdown-item) {
              padding: 0 24px;
            }
            @include b(dropdown-divider) {
              margin: 2px 0;
            }
            @include b(dropdown-submenu-activator) {
              @include e(arrow) {
                font-size: 16px;
                margin-left: 20px;
              }
            }
          }
          @include m(huge-size) {
            @include b(base-select-menu-option-wrapper) {
              padding-top: 8px;
              padding-bottom: 8px;
            }
            @include b(dropdown-item) {
              padding: 0 24px;
            }
            @include b(dropdown-submenu-activator) {
              @include e(arrow) {
                font-size: 16px;
                margin-left: 20px;
              }
            }
          }
        }
        @include m(as-menu-popover) {
          @include b(base-select-menu) {
            min-width: 132px;
            @include b(base-select-menu-option-wrapper) {
              padding-top: 0 !important;
              padding-bottom: 0 !important;
            }
          }
        }
      }
      @include b(dropdown-divider) {
        margin: 2px 0;
      }
      @include b(dropdown-submenu) {
        @include fade-in-scale-up-transition();
        margin-top: 0;
        position: absolute !important;
        margin-left: 6px;
        margin-right: 6px;
      }
    }
  }
}