@use "sass:math";

$floor-filter-item-width--normal: 220px;
$floor-filter-item-width--compact: math.floor($floor-filter-item-width--normal * 3 * 0.25);
$floor-filter-scrollbar-thumb--color: #c1c1c1;
$floor-filter-scrollbar-track--color: #fafafa;

@mixin floorFilter() {
  .esri-floor-filter {
    display: flex;
    flex-direction: row;
    border: none;
    box-shadow: none !important;
    background: transparent;

    &__position {
      &--top {
        align-items: flex-start;

        .esri-floor-filter__levels-container,
        .esri-floor-filter__close-levels-button,
        .esri-floor-filter__zoom-button,
        .esri-floor-filter__zoom-button--levels,
        .esri-floor-filter__minimize-toggle-button {
          border-width: 1px 0 0;
        }
      }

      &--bottom {
        align-items: flex-end;

        .esri-floor-filter__levels-container,
        .esri-floor-filter__close-levels-button,
        .esri-floor-filter__zoom-button,
        .esri-floor-filter__zoom-button--levels,
        .esri-floor-filter__minimize-toggle-button {
          border-width: 0 0 1px;
        }
      }
    }

    &__layout {
      &--collapsed {
        .esri-floor-filter__button-container {
          display: flex;
          flex-direction: column;
          max-width: $button-width--plus-half;

          .esri-icon {
            position: relative;
            top: 2px;
          }

          .esri-floor-filter__browse-button {
            border: none;
            padding: 12px;
            width: $button-width--plus-half;
            height: $button-height--plus-half;
          }

          .esri-floor-filter__zoom-button {
            border-style: solid;
            border-color: $border-color;
            padding: 12px;
            width: $button-width--plus-half;
            height: $button-height--plus-half;
          }

          .esri-floor-filter__zoom-button--levels {
            border-style: solid;
            border-color: $border-color;
            padding: 8px 12px;
            width: $button-width--plus-half;
            height: $button-height;
          }

          .esri-floor-filter__minimize-toggle-button {
            border-style: solid;
            border-color: $border-color;
            padding: 4px 12px;
            width: $button-width--plus-half;
            height: $button-height;
          }
        }
      }

      &--expanded {
        .esri-floor-filter__button-container {
          display: flex;
          flex-direction: column;
          max-width: $panel-width;

          .esri-icon {
            position: relative;
            top: 2px;
          }

          .esri-floor-filter__button-info {
            margin-right: auto;
          }

          .esri-floor-filter__browse-button {
            border: none;
            padding: 12px;
            width: auto;
            height: $button-height--plus-half;
          }

          .esri-floor-filter__level-button {
            justify-content: flex-start;
            padding: 16px;
            text-align: left;
          }

          .esri-floor-filter__zoom-button {
            border-style: solid;
            border-color: $border-color;
            padding: 12px;
            width: auto;
            height: $button-height--plus-half;
          }

          .esri-floor-filter__zoom-button--levels {
            border-style: solid;
            border-color: $border-color;
            padding: 8px 12px;
            width: auto;
            height: $button-height;
          }

          .esri-floor-filter__minimize-toggle-button {
            border-style: solid;
            border-color: $border-color;
            padding: 4px 12px;
            width: auto;
            height: $button-height;
          }

          .esri-floor-filter__button-label {
            margin-left: 8px;
          }
        }
      }
    }

    .esri-floor-filter__level-button {
      border: none;
      width: 100%;
      height: $button-height--plus-half;
    }

    .esri-floor-filter__level-button:focus {
      background-color: $background-color--hover;
    }

    .esri-floor-filter__level-button.esri-widget--button-active:focus {
      background-color: $background-color--active;
    }

    .esri-floor-filter__levels-container {
      margin: unset;
      border-style: solid;
      border-color: $border-color;
      padding: unset;
      width: 100%;
      max-height: $panel-max-height--small;
      overflow: auto;
      list-style-type: none;
      scrollbar-width: thin;

      .esri-widget--button-active {
        font-weight: $font-weight--bold;
      }
    }

    .esri-floor-filter__levels-container::-webkit-scrollbar {
      width: 6px;
    }

    .esri-floor-filter__levels-container::-webkit-scrollbar-track {
      background: $floor-filter-scrollbar-track--color;
    }

    .esri-floor-filter__levels-container::-webkit-scrollbar-thumb {
      border: 3px solid $floor-filter-scrollbar-thumb--color;
      border-radius: 20px;
      background-color: $floor-filter-scrollbar-thumb--color;
    }

    .esri-widget--button-active {
      background: $background-color--active;
      color: $button-color--active;
    }

    .esri-floor-filter__button-container {
      @include defaultBoxShadow();
    }

    .esri-floor-filter__filter-menu {
      @include defaultBoxShadow();

      display: flex;
      flex-direction: column;
      align-items: stretch;
      background: $background-color;
      width: $panel-width;
      max-height: $panel-max-height--small;

      .esri-floor-filter__filter-menu-header {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        box-shadow: 0 0.5px 0 $Calcite_Gray_300;
        height: auto;
        line-height: $line-height;
        color: $font-color;
      }

      .esri-floor-filter__filter-menu-header-back {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: unset;
        border: none;
        border-right: 1px solid $border-color;
        background-color: $background-color;
        padding: 26px 0;
        min-width: 28px;
        color: $interactive-font-color;
      }

      .esri-floor-filter__filter-menu-header-back:hover {
        background: $background-color--hover;
        cursor: pointer;
        color: $interactive-font-color--hover;
      }

      .esri-floor-filter__filter-menu-header-text-group {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 12px;
        max-width: calc(#{$panel-width} - 28px - 40px);
      }

      .esri-floor-filter__filter-menu-header-text {
        display: -webkit-box;
        margin: unset;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: $font-size__header-text;
        font-weight: $font-weight--bold;
        font-style: normal;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .esri-floor-filter__filter-menu-header-subtext {
        display: -webkit-box;
        margin: 4px 0 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: $font-size;
        font-weight: $font-weight--regular;
        font-style: normal;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .esri-icon-close {
        display: flex;
        align-items: center;
        margin: 0 0 0 auto;
        border: none;
        background-color: $background-color;
        padding: 26px 12px;
        color: $interactive-font-color;
      }

      .esri-icon-close:hover {
        background: $background-color--hover;
        cursor: pointer;
        color: $interactive-font-color--hover;
      }

      .esri-floor-filter__filter-menu-search {
        display: flex;
        align-items: center;
        margin-top: 0.5px;
        margin-bottom: 1px;
        box-shadow: 0 0.5px 0 $Calcite_Gray_300;
        background: $background-color--hover;
        padding: 10px;

        .esri-floor-filter__filter-menu-search-input {
          margin-left: 6px;
          outline: none;
          border: none;
          background: transparent;
          width: 100%;
          color: $font-color;
          font-size: $font-size;
        }
      }

      .esri-floor-filter__filter-menu-items {
        margin: unset;
        padding: unset;
        width: 100%;
        max-height: 300px;
        overflow-y: auto;
        list-style-type: none;
        color: $font-color;

        .esri-floor-filter__filter-menu-site:hover,
        .esri-floor-filter__filter-menu-site:focus,
        .esri-floor-filter__filter-menu-facility:hover,
        .esri-floor-filter__filter-menu-facility:focus {
          background: $background-color--hover;
          cursor: pointer;
        }

        .esri-floor-filter__filter-menu-site:active,
        .esri-floor-filter__filter-menu-facility:active {
          background-color: $background-color--active;
          color: $font-color;
        }

        .esri-floor-filter__filter-menu-site,
        .esri-floor-filter__filter-menu-facility {
          display: flex;
          flex-direction: row;
          align-items: center;
          border: none;
          background: $background-color;
          padding: 18px;
          width: 100%;
          color: $interactive-font-color;

          .esri-floor-filter__filter-menu-item-name {
            font-size: $font-size;
          }

          .esri-floor-filter__filter-menu-item-name--selected {
            color: $font-color;
            font-size: $font-size;
            font-weight: $font-weight--bold;
          }

          .esri-floor-filter__filter-menu-item-name,
          .esri-floor-filter__filter-menu-item-name--selected {
            margin-right: 10px;
            max-width: $floor-filter-item-width--normal;
            text-align: left;
          }

          .esri-icon-right {
            margin-left: auto;
          }
        }

        .esri-floor-filter__selected-item-circle {
          margin-right: 6px;
          margin-left: -10px;
          border-radius: 50%;
          background: $Brand_Blue_200;
          width: 4px;
          height: 4px;
        }
      }
    }

    .esri-floor-filter__separator {
      border: none;
      box-shadow: none;
      background: transparent;
      width: $view-ui-spacing;
    }
  }

  .esri-expand__content {
    .esri-floor-filter {
      width: max-content;
    }
  }

  .esri-view-height-less-than-small .esri-floor-filter,
  .esri-view-width-less-than-small .esri-floor-filter {
    .esri-floor-filter__zoom-button,
    .esri-floor-filter__zoom-button--levels {
      display: none;
    }

    .esri-floor-filter__minimize-toggle-button {
      display: none;
    }

    .esri-floor-filter__filter-menu {
      width: $panel-width--three-quarters;
    }

    .esri-floor-filter__close-levels-button {
      border-style: solid;
      border-color: $border-color;
      background: $Calcite_Gray_250;
      padding: 12px;
      width: $button-width--plus-half;
      height: $button-height--plus-half;
    }

    .esri-floor-filter__filter-menu-header-text-group {
      max-width: calc(#{$panel-width--three-quarters} - 28px - 40px);
    }

    .esri-floor-filter__filter-menu-item-name,
    .esri-floor-filter__filter-menu-item-name--selected {
      max-width: $floor-filter-item-width--compact !important;
    }
  }

  .esri-view-height-small .esri-floor-filter {
    .esri-floor-filter__levels-container {
      max-height: calc(#{$panel-max-height--small} - 100px);
    }

    .esri-floor-filter__filter-menu {
      max-height: calc(#{$panel-max-height--small} - 100px);
    }
  }

  .esri-view-height-xsmall .esri-floor-filter {
    .esri-floor-filter__levels-container {
      max-height: calc(#{$button-height--plus-half} * 3 + 12px);
    }

    .esri-floor-filter__filter-menu {
      max-height: $panel-max-height--xsmall;
    }
  }

  [dir="rtl"] .esri-floor-filter {
    &__layout--expanded {
      .esri-floor-filter__button-info {
        margin-right: unset;
        margin-left: auto;
      }

      .esri-floor-filter__button-label {
        margin-right: 8px;
        margin-left: unset;
      }
    }

    .esri-icon-close {
      margin: 0 auto 0 0;
    }

    .esri-floor-filter__filter-menu .esri-floor-filter__filter-menu-header-back {
      border-right: none;
      border-left: 1px solid $border-color;
    }

    .esri-floor-filter__filter-menu-search .esri-floor-filter__filter-menu-search-input {
      margin-right: 6px;
      margin-left: unset;
    }

    .esri-floor-filter__filter-menu-items {
      .esri-floor-filter__filter-menu-site,
      .esri-floor-filter__filter-menu-facility {
        .esri-icon-left {
          margin-right: auto;
        }
      }

      .esri-floor-filter__filter-menu-item-name,
      .esri-floor-filter__filter-menu-item-name--selected {
        margin-right: unset !important;
        margin-left: 10px !important;
        text-align: right !important;
      }

      .esri-floor-filter__selected-item-circle {
        margin-right: -10px;
        margin-left: 6px;
      }
    }
  }
}

@if $include_FloorFilter == true {
  @include floorFilter();
}
