@import '../../variables';
@import '../../mixins';

@include exports('components.fui-filters-popover') {
  .fui-filters-popover {
    width: 600px;
    max-width: 600px;
    min-width: 600px;
    box-shadow: 0 4px 10px 0 rgba(54, 71, 82, 0.2);
    border-radius: $border-radius;
    background-color: $white;
    z-index: $zindex-popover;

    .fui-datagrid-text-filter,
    .fui-datagrid-boolean-filter {
      width: 100%;
      height: 100%;
      display: block;
    }

    .ng-dropdown-panel.ng-select-multiple {
      .ng-option {
        font-size: $font-size-sm !important;
      }
    }

    .fui-filters-popover-header,
    .fui-filters-popover-body {
      position: relative;
      padding: 0 20px;
      min-height: 60px;
      max-height: 350px;
      overflow-y: auto;

      > .container-fluid {
        > .row {
          border-top: 1px solid $gray-300;
          min-height: 60px;

          .col-3,
          .col-4,
          .col-5,
          .col {
            font-size: $font-size-base;
            font-weight: $font-weight-bold;
            margin-left: 0;

            &.fui-filters-field-name {
              display: flex;
              flex-flow: column nowrap;
              align-items: flex-start;
              align-content: center;
              justify-content: center;
              @include text-truncate();
            }

            &:not(:last-child) {
              padding: 12px 10px 12px 0;
            }

            &:last-child {
              padding: 12px 0;
            }
          }
        }
      }
    }

    .fui-filters-popover-header {
      overflow-y: hidden;
      > .container-fluid {
        > .row {
          border-top: none;
        }
      }
    }

    .fui-filters-popover-footer {
      display: block;
      height: 60px;
      border-top: 1px solid $gray-300;

      .col,
      .col-auto {
        line-height: 56px;
        text-align: left;
        padding: 0 !important;

        .btn {
          text-transform: uppercase;
          font-size: $font-size-sm;
          font-weight: $font-weight-bold;

          &.btn-clear {
            color: $red;
            padding: 0;

            &:hover,
            &:focus {
              background-color: transparent;
              color: $red-heavy;
            }
          }
        }
      }

      .col {
        text-align: right;
      }
    }
  }
}