@use 'theme-variables' as *;

@include export-module('toolbar-theme') {
  .sf-toolbar {
    background: $toolbar-bg-color;
    border: $toolbar-border-width $toolbar-border-style $toolbar-border-color;
    box-shadow: $toolbar-box-shadow;
  }

  .sf-rtl:not(.sf-toolbar-vertical) .sf-toolbar-hor-nav {
    border-width: $toolbar-popup-rtl-border-width;
  }

  .sf-toolbar-hor-nav {
    background: $toolbar-bg-color;
    border: $toolbar-nav-border-style $toolbar-border-color;
    border-width: $toolbar-popup-border-width;
    color: $toolbar-popup-icon-color;

    &:active {
      box-shadow: $toolbar-nav-pressed-box-shadow;
      background: $toolbar-popup-nav-active-bg;
    }

    &:hover {
      background: $toolbar-popup-nav-hover-bg;

      &:active {
        background: $toolbar-popup-nav-hover-active-bg;
      }
    }

    &:focus {
      background: $toolbar-popup-nav-focus-bg;
    }
  }

  .sf-toolbar-separator {
    border: $toolbar-separator-border-style $toolbar-separator-border-color;
    border-width: $toolbar-separator-horizontal-border-width;
  }

  .sf-toolbar-hor-nav.sf-nav-active {
    background: $toolbar-popup-nav-selected-bg;
    box-shadow: $toolbar-nav-selected-box-shadow;
  }

  .sf-toolbar-popup-items {
    background: $toolbar-popup-bg-color;
    border: $toolbar-border-width $toolbar-border-style $toolbar-border-color;
    box-shadow: $toolbar-popup-box-shadow;

    &:not(.sf-toolbar-extended-items) .sf-btn:focus-visible {
      box-shadow: none;
    }

    .sf-toolbar-item:not(.sf-toolbar-separator) {
      background: $toolbar-popup-item-bg-color;
    }
  }

  .sf-toolbar-extended:not(.sf-toolbar-vertical) .sf-toolbar-popup-items {
    background: $toolbar-bg-color;
  }
}