@use 'theme-variables' as *;

@include export-module('toolbar-layout') {
  .sf-toolbar {
    display: block;
    position: relative;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    border-radius: $toolbar-border-radius;
  }

  .sf-toolbar-hor-nav {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 100%;
    overflow: hidden;
    position: absolute;
    inset-inline-end: $toolbar-nav-position-offset;
    top: $toolbar-nav-position-offset;
    width: $toolbar-nav-width;
    height: $toolbar-nav-height;
    margin: $toolbar-nav-margin;
  }

  .sf-toolbar-popup-icon {
    width: 100%;

    svg {
      font-size: $toolbar-popup-nav-font-size;
    }
  }

  .sf-toolbar-items {
    display: flex;
    height: 100%;
    vertical-align: middle;
    align-items: center;
    overflow: hidden;

    &:not(.sf-hscroll):not(.sf-vscroll) {
      padding: $toolbar-items-padding;
      gap: $toolbar-items-gap;
    }

  }

  .sf-toolbar-popup-overflow {
    width: calc(100% - $toolbar-nav-width);
  }

  .sf-toolbar-item {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    vertical-align: middle;
    width: auto;
    flex: 0 0 auto;

    &:not(.sf-toolbar-separator):not(.sf-toolbar-spacer) {
      height: inherit;
      min-height: $toolbar-item-min-height;
      min-width: $toolbar-item-min-width;
    }
  }

  .sf-toolbar-spacer {
    flex-grow: 1;
    cursor: auto;
  }

  .sf-toolbar-separator {
    min-height: $toolbar-separator-min-height;
    min-width: $toolbar-separator-min-width;
    height: $toolbar-separator-height;
  }

  .sf-toolbar-multirow {
    height: auto;
  }

  .sf-toolbar-multirow-items {
    white-space: normal;
    flex-wrap: wrap;
  }

  .sf-toolbar-items .sf-hscroll-content {
    display: flex;
    padding: $toolbar-items-padding;
    gap: $toolbar-items-gap;
    align-items: center;
    touch-action: pan-y pinch-zoom;
  }

  .sf-toolbar-popup,
  .sf-toolbar-extended {
    overflow: visible;

    .sf-hidden-popup {
      display: block;
      visibility: hidden;

      .sf-toolbar-item {
        position: absolute;
      }
    }
  }

  .sf-toolbar-popup-items {
    border-radius: $toolbar-popup-border-radius;
    overflow: hidden;
    padding: $toolbar-popup-padding;
    position: absolute;

    .sf-toolbar-item {
      display: flex;
      height: $toolbar-item-height;
      justify-content: center;
      min-height: $toolbar-popup-item-min-height;

      &:not(.sf-toolbar-separator) {
        height: $toolbar-item-height;
        min-width: $toolbar-popup-min-width;
      }

      >* {
        min-height: 100%;
        min-width: 100%;
        display: flex;
        justify-content: flex-start;
      }
    }

    &:not(.sf-hidden-popup) {

      .sf-toolbar-separator,
      .sf-toolbar-spacer {
        display: none;
      }
    }
  }

  .sf-toolbar-extended:not(.sf-toolbar-vertical) {

    .sf-toolbar-extended-items {
      box-shadow: $toolbar-box-shadow;
      display: flex;
      flex-wrap: wrap;
      white-space: normal;
      gap: $toolbar-items-gap;
      padding: $toolbar-items-padding;
      vertical-align: middle;
      align-items: center;

      .sf-toolbar-item {
        display: inline-flex;
        min-height: $toolbar-item-min-height;

        &:not(.sf-toolbar-separator) {
          min-width: $toolbar-item-min-width;
        }
      }

      .sf-toolbar-separator {
        min-height: $toolbar-separator-min-height;
        height: $toolbar-separator-height;
      }

      &.sf-popup-close:not(.sf-hidden-popup),
      .sf-toolbar-separator.sf-extended-separator {
        display: none;
      }
    }

    .sf-toolbar-popup-items {
      width: inherit;

      .sf-toolbar-item:not(.sf-toolbar-separator) {
        height: auto;
      }

      .sf-toolbar-item>* {
        align-self: center;
      }
    }
  }

  .sf-toolbar-vertical {
    height: auto;
    display: flex;
    flex-direction: column;

    .sf-toolbar-items {
      flex-direction: column;
      align-items: normal;

      &:not(.sf-hscroll):not(.sf-vscroll) {
        padding: $toolbar-vertical-items-padding;
      }

    }

    .sf-toolbar-popup-overflow {
      width: 100%;
      height: calc(100% - $toolbar-items-height);
    }

    .sf-toolbar-item {

      &:not(.sf-toolbar-separator) {
        min-width: $toolbar-popup-vertical-min-width;
        height: auto;
      }

      >* {
        width: 100%;
        display: flex;
        justify-content: flex-start;
      }
    }

    .sf-toolbar-separator {
      height: auto;
      min-height: auto;
      border-width: $toolbar-separator-vertical-border-width;
    }

    .sf-vscroll .sf-vscroll-content {
      display: flex;
      flex-direction: column;
      padding: $toolbar-vertical-items-padding;
      gap: $toolbar-items-gap;
      touch-action: pan-x pinch-zoom;
    }

    .sf-toolbar-hor-nav {
      bottom: 0;
      height: auto;
      left: 0;
      min-height: $toolbar-items-height;
      min-width: $toolbar-items-min-width;
      right: auto;
      top: auto;
      width: 100%;
      border-width: $toolbar-popup-vertical-border-width;
    }
  }

}