@import './../index.scss';
@import '~amos-framework/lib/styles/mixins/scrollbar.scss';

.eb-com-filter-pane {
  width: 100%;
  height: 100%;
  min-width: 200px;
  // background-color: $background-transparent;
  background: $filter-pane-background;

  .eb-com-filter-pane-title {
    display: flex;
    width: 100%;
    height: 31px;
    padding: 0 13px 0 20px;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 1px;
    // color: $frame-fourth-color;
    color: $font-color-333333;
    align-items: center;
    font-stretch: normal;
    // background-image: linear-gradient(180deg, white 0%, #f3f3f3 100%);
    background: $filter-pane-title-background;
    // border-bottom: solid 1px #eaeaea;
    border: 1px solid $border-color-eaeaea;

    span {
      flex: 1;
    }

    img {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
  }

  .eb-com-filter-pane-content {
    @include pretty-scrollbar(5px, 8px, $scrollOutColor, $scrollInnerColor);

    height: calc(100% - 108px);
    padding: 15px;
    overflow: auto;

    .amos-std-form-pro {
      width: 13em;

      .amos-std-form-vertical-label {
        color: $form-label-font-color;
      }
    }
  }

  .eb-com-filter-pane-footer {
    position: absolute;
    bottom: 0;
    display: flex;
    width: 100%;
    padding-top: 24px;
    padding-bottom: 24px;
    // border-top: solid 1px $frame-main-bordercolor;
    border-top: 1px solid $border-color-e4e4e4;
    justify-content: center;
    align-items: center;

    .eb-com-filter-pane-btn {
      height: auto;
      padding: 6px 21px;
      font-size: $frame-third-fontsize;
      border-radius: 6px;

      &.eb-com-filter-pane-reset-btn {
        // color: $frame-first-color;
        color: $font-color-3f3f3f;
        // background-color: white;
        background: $filter-pane-reset-btn-background;
        // border: solid 1px $frame-main-bordercolor;
      }

      &.eb-com-filter-pane-search-btn {
        margin-left: 16px;
        color: white;
        background-color: $frame-main-color;
        border: solid 1px $frame-second-bordercolor;
      }
    }
  }
}
