@use 'theme-variables' as *;

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

    ul .sf-item {
      .sf-menu-url { color: $drop-down-btn-color; }
      .sf-menu-icon path { fill: $drop-down-btn-menu-icon-color; }

      &.sf-focused {
        background: $drop-down-btn-li-focus-bgcolor;
        box-shadow: $drop-down-btn-no-shadow;
      }

      &:hover {
        background: $drop-down-btn-li-bgcolor;
        color: $drop-down-btn-li-selection-font-color;
      }

      &:active, &.sf-selected {
        background: $drop-down-btn-li-selection-bgcolor;
        color: $drop-down-btn-selected-color;

        .sf-menu-url { color: $drop-down-btn-selected-color; }
        .sf-menu-icon path { fill: $drop-down-btn-selected-color; }
      }
    }
  }
}