/* smart-list-menu */
smart-list-menu {
  width: var(--smart-list-menu-default-width);
  height: var(--smart-list-menu-default-height);
  display: block;
  background: var(--smart-background);
  border: var(--smart-border-width) solid var(--smart-border);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
  outline: none;
  color: var(--smart-background-color);
  visibility: hidden;

  &:focus {
    border-color: var(--smart-outline);
  }

  >.smart-container {
    position: relative;
    display: flex;
  }

  &.smart-element {
    visibility: inherit;
  }

  .smart-ripple {
    background: var(--smart-ui-state-focus);
  }

  &[minimized] {
    height: auto;
    overflow: visible;
    border: var(--smart-border-width) solid var(--smart-border);
    background: var(--smart-surface);
  }

  &[drop-down-position|="top"] {
    .smart-list-menu-view-minimized {
      top: calc(-1 * var(--smart-border-width));
      transform: translateY(-100%);
      box-shadow: var(--smart-elevation-8);
    }
  }

  &[drop-down-position$="left"] {
    .smart-list-menu-view-minimized {
      left: initial;
      right: calc(-1 * var(--smart-border-width));
    }
  }

  &:not([animation='none']) {
    .smart-hamburger-icon-line {
      transition: visibility 0.02s ease-in, transform 0.2s ease-in, width 0.2s ease-in;
    }
  }
}

smart-tree {
  .smart-filter-input:focus {
    outline: none;
  }
}

.smart-list-menu {
  &.smart-container {
    position: relative;
    display: flex;
  }

  smart-menu-items-group[hover],
  smart-menu-item[hover] {
    background: var(--smart-ui-state-hover);
    border-color: var(--smart-ui-state-border-hover);
    color: var(--smart-ui-state-color-hover);
  }

  .smart-hamburger-icon {
    width: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    float: none;
    cursor: pointer;
    margin-top: 2px;

    .smart-hamburger-icon-custom-container {
      height: 100%;
      display: flex;
      align-items: center;
    }

    &.smart-close-button {
      >.smart-hamburger-icon-line-top {
        width: 29px;
        transform: translateX(4px) rotate(45deg);
      }

      >.smart-hamburger-icon-line-center {
        visibility: hidden;
      }

      >.smart-hamburger-icon-line-bottom {
        width: 29px;
        transform: translateX(4px) rotate(-45deg);
      }
    }
  }

  .smart-hamburger-icon-line {
    margin-bottom: 5px;
    border-radius: 10px;
    width: 30px;
    height: 5px;
    background-color: var(--smart-surface-color);
    transform-origin: left;

    //background-color: #757575;
  }

  .smart-hamburger-icon-line-bottom {
    margin-bottom: 0;
  }

  .smart-list-menu-view-minimized {
    left: calc(-1 * var(--smart-border-width));
    top: calc(100% + var(--smart-border-width));

    &.smart-visibility-hidden.not-in-view {
      //Microsoft Edge-specific fix
      left: -9999px;
      top: -9999px;
      transition: none;
    }
  }

  &[minimized] {
    .smart-minimized-header {
      background: var(--smart-surface);
      justify-content: flex-end;
    }
  }

  &[disabled] {

    smart-menu-item,
    smart-menu-items-group,
    .smart-hamburger-icon {
      cursor: default;
    }

    .smart-hamburger-icon {
      cursor: default;
    }
  }

  &[minimize-icon-template] {
    .smart-hamburger-icon {
      width: auto;
      float: left;
    }
  }

  &:not([animation='none']) {
    .smart-hamburger-icon-line {
      transition: visibility 0.02s ease-in, transform 0.2s ease-in, width 0.2s ease-in;
    }

    .smart-list-menu-view-minimized {
      opacity: 1;
      transform: scaleY(1);
      margin: 8px 0px;
      -webkit-transform-origin: top;
      transform-origin: top;
      transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in;

      &.smart-visibility-hidden {
        opacity: 0.2;
        transform: scaleY(0);
      }
    }
  }

  &[minimize-icon-template="null"] {
    .smart-hamburger-icon {
      width: 40px;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      float: none;
      cursor: pointer;
      margin-top: 2px;
    }
  }

  &[drop-down-position*="top"] {
    .smart-list-menu-view-minimized {
      margin: -8px 0px;
    }
  }

  &[drop-down-position|="top"]:not([animation='none']) {
    .smart-list-menu-view-minimized {
      transform: translateY(-100%) scaleY(1);
      -webkit-transform-origin: bottom;
      transform-origin: bottom;

      &.smart-visibility-hidden {
        transform: translateY(-100%) scaleY(0);
      }
    }
  }
}

.smart-list-menu,
.smart-list-menu-view.smart-drop-down-repositioned {

  smart-menu-item,
  smart-menu-items-group {
    padding: 10px 0;

    &.smart-element {
      display: block;
      width: 100%;
      height: auto;
      overflow: hidden;
    }

    &[separator] {
      &:last-child {
        border-bottom: none;
      }
    }
  }

  smart-menu-items-group {
    &.smart-menu-items-group-opened[separator] {
      border-bottom: none;
    }
  }

  .smart-header {
    background: var(--smart-primary);
    color: var(--smart-primary-color);
    border-color: var(--smart-primary);
    box-shadow: var(--smart-elevation-4);
    z-index: 3;
    padding: 0px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: var(--smart-bar-height);
    border-bottom: var(--smart-border-width) solid var(--smart-primary);
    overflow: hidden;

    >smart-button {
      position: absolute;
      width: 50px;
      height: 100%;
      left: 0;
      top: 0;
      background: inherit;
      border: inherit;
      color: inherit;

      >.smart-button {
        border: none;
      }

      .smart-arrow:after {
        font-size: calc(var(--smart-font-size) - 3px);
        color: inherit;
      }
    }
  }

  .smart-menu-scroll-button {
    display: block;
    background-color: var(--smart-scroll-bar-background);
    color: var(--smart-scroll-bar-color);
    border-radius: 0px;
    border-left: none;
    border-right: none;

    //width: var(--smart-menu-scroll-button-size);
    //height: 100%;

    width: 100%;
    height: var(--smart-menu-scroll-button-size);

    >button {
      border: none;
      min-height: 0;
    }

    &:last-of-type {
      border-bottom: none;
    }
  }

  .smart-hidden {
    display: none !important;
  }

  .smart-title {
    display: flex;
    align-items: center;
    font-size: calc(var(--smart-font-size) + 2px);
  }

  .smart-menu-item-label-container {
    display: flex;
    position: relative;
    justify-content: space-between;
    padding: 10px;
    width: 100%;
  }

  .smart-menu-main-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;

    .smart-scroll-viewer-content-container {
      width: 100%;
    }

    &.header-shown {
      height: calc(100% - var(--smart-bar-height));

      &.scroll-buttons-shown {
        height: calc(100% - var(--smart-bar-height) - 2 * var(--smart-menu-scroll-button-size));

        &.one-button-shown {
          height: calc(100% - var(--smart-bar-height) - var(--smart-menu-scroll-button-size));

          &.filter-input-shown {
            height: calc(100% - var(--smart-bar-height) - var(--smart-menu-scroll-button-size) - var(--smart-text-box-default-height) - 2 * var(--smart-list-menu-filter-input-vertical-offset));
          }
        }

        &.filter-input-shown {
          height: calc(100% - var(--smart-bar-height) - 2 * var(--smart-menu-scroll-button-size) - var(--smart-text-box-default-height) - 2 * var(--smart-list-menu-filter-input-vertical-offset));
        }
      }

      &.filter-input-shown {
        height: calc(100% - var(--smart-bar-height) - var(--smart-text-box-default-height) - 2 * var(--smart-list-menu-filter-input-vertical-offset));
      }
    }

    &.scroll-buttons-shown {
      height: calc(100% - 2 * var(--smart-menu-scroll-button-size));

      &.one-button-shown {
        height: calc(100% - var(--smart-menu-scroll-button-size));

        &.filter-input-shown {
          height: calc(100% - var(--smart-menu-scroll-button-size) - var(--smart-text-box-default-height) - 2 * var(--smart-list-menu-filter-input-vertical-offset));
        }
      }

      &.filter-input-shown {
        height: calc(100% - 2 * var(--smart-menu-scroll-button-size) - var(--smart-text-box-default-height) - 2 * var(--smart-list-menu-filter-input-vertical-offset));
      }
    }

    &.filter-input-shown {
      height: calc(100% - var(--smart-text-box-default-height));
    }

    &.bounce-top {
      padding-top: 50px;
    }

    &.bounce-bottom {
      padding-bottom: 50px;
    }
  }

  .smart-menu-item-label-element {
    display: flex;
    align-items: center;
  }

  .smart-menu-item-shortcut {
    margin-left: 0;
  }

  .smart-menu-items-group-arrow {
    display: flex;
    align-items: center;
  }

  .smart-menu-drop-down {
    width: 100%;

    &[level="2"]:not(.smart-menu-minimized-items-container) {
      margin: 0;
    }
  }

  .smart-tree-main-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding: var(--smart-tree-item-horizontal-offset);
    overflow: hidden;
  }

  .smart-list-menu-filter-input-container {
    position: relative;
    width: calc(100% - 10px);
    height: calc(var(--smart-text-box-default-height));
    margin: 5px;
    font-size: inherit;

    &:after {
      content: var(--smart-icon-filter);
      font-family: var(--smart-font-family-icon);
      height: var(--smart-text-box-default-height);
      position: absolute;
      top: 0;
      width: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      left: calc(100% - 25px);
    }
  }

  .smart-filter-input {
    border: 1px solid var(--smart-border);
    width: 100%;
    height: 100%;
    padding-left: var(--smart-editor-label-padding);
    padding-right: calc(var(--smart-editor-label-padding) + 25px);
    font-size: inherit;

    &::selection {
      background: var(--smart-editor-selection);
      color: var(--smart-editor-selection-color);
    }

    &:focus {
      outline: none;
    }
  }

  .smart-list-menu-group-label {
    margin-bottom: 1px;
    padding: 10px;
    background-color: var(--smart-disabled);
    color: var(--smart-disabled-color);
    font-size: calc(var(--smart-font-size) + 1px);
    font-weight: bold;
    cursor: default;
    user-select: none;
  }

  .smart-scroll-viewer {
    border: none;
  }

  &[checkboxes] {

    &[checkable] smart-menu-item[level="1"],
    &[checkable] smart-menu-items-group[level="1"],
    .smart-menu-item-container[checkable]>smart-menu-item,
    .smart-menu-item-container[checkable]>smart-menu-items-group {
      >.smart-menu-item-label-container {
        padding-left: 35px;
      }

      &[checked] {
        >.smart-menu-item-label-container {
          &:after {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            content: var(--smart-icon-check);
            font-family: var(--smart-font-family-icon);
          }
        }
      }
    }

    &[checkable][check-mode="radioButton"] smart-menu-item[level="1"],
    &[checkable][check-mode="radioButton"] smart-menu-items-group[level="1"],
    .smart-menu-item-container[checkable][check-mode="radioButton"]>smart-menu-item,
    .smart-menu-item-container[checkable][check-mode="radioButton"]>smart-menu-items-group {
      &[checked] {
        >.smart-menu-item-label-container:after {
          content: var(--smart-icon-radio);
        }
      }
    }
  }

  &[animation='none'] {
    &.smart-visibility-hidden {
      transform: scale(0);
    }
  }
}


.smart-list-menu,
.smart-list-menu-view-minimized {
  &:not([animation='none']) {
    smart-menu-item {
      position: relative;
    }

    smart-menu-item,
    smart-menu-items-group,
    .smart-menu-item-label-container,
    .smart-list-menu-group-label {
      left: 0;
      transition: left 0.3s ease-in;

      &.animate {
        left: -100%;
      }

      &.right {
        left: -100%;
        transition: none;
      }
    }

    .smart-list-menu-group-label {
      position: relative;
    }

    .smart-menu-items-group-opened {
      overflow: visible;
    }

    .smart-menu-drop-down {
      position: absolute;
      top: 0;
      left: 0;
      transition: left 0.3s ease-in;

      &.smart-hidden {
        display: block !important;
        left: 100%;
      }

      &.no-transition {
        transition: none;
      }
    }
  }
}

.smart-list-menu-view {
  width: 100%;
  height: 100%;
  overflow: hidden;

  &.smart-list-menu-view-minimized {
    position: absolute;
    width: var(--smart-editor-drop-down-width);
    height: var(--smart-editor-drop-down-height);
    left: calc(-1 * var(--smart-border-width));
    top: calc(100% + var(--smart-border-width));
    background-color: white;
    box-shadow: var(--smart-elevation-8);
  }
}

.smart-list-menu-view-minimized {
  &.smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position*="top"] {
    margin: -8px 0px;
  }

  &:not([animation='none']) {
    opacity: 1;
    transform: scaleY(1);
    margin: 8px 0px;
    -webkit-transform-origin: top;
    transform-origin: top;
    transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in;

    &.smart-visibility-hidden {
      opacity: 0.2;
      transform: scaleY(0);
    }

    smart-menu-items-group.smart-element.smart-menu-items-group-opened {
      overflow: visible;
    }
  }

  &.smart-drop-down-repositioned {
    &.smart-visibility-hidden.not-in-view {
      //Microsoft Edge-specific fix
      left: -9999px;
      top: -9999px;
      transition: none;
    }
  }

  &[drop-down-position|="top"]:not([animation='none']) {
    transform: translateY(-100%) scaleY(1);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;

    &.smart-visibility-hidden {
      transform: translateY(-100%) scaleY(0);
    }
  }
}
@import 'rtl/_listmenu';