@import '../variables/default.scss';
@import '../mixins/index.scss';

$Component: '.at-filter';

#{$Component} {
  &_drawer {
    color: $color-black-1;

    .at-drawer__content {
      overflow: hidden;
      display: flex;
      transform: none;
      flex-direction: column;
    }

    &-container {
      flex: 1;
      overflow-y: auto;

      #{$Component}_item {
        padding: 30px $spacing-v-lg;
        @include hairline-bottom();

        &-title {
          font-size: $font-size-sml;
          margin-bottom: $spacing-v-lg;
          display: flex;
          justify-content: space-between;

          .at-icon {
            color: $color-grey-3;
          }
        }

        &-content {
          .at-input {
            border: 1px solid $color-grey-3;
            border-radius: $border-radius-md;
            padding: $spacing-v-sm $spacing-h-lg;

            &__input {
              font-size: $font-size-base;
            }
          }

          .at-radio-tag {
            display: flex;
            margin-top: -$spacing-v-lg;

            .at-radio__tag {
              margin-top: $spacing-v-lg;
            }
          }

          .at-radio__tag {
            flex: 0 0 calc((100% - #{$spacing-v-lg} * 2) / 3);
            margin-bottom: 0;
            margin-top: 0;
            line-height: 50px;
            font-size: $font-size-base;
            border-radius: 4px;
            padding: 0 $spacing-h-md;
            @include line();

            &:nth-child(3n) {
              margin-right: 0;
            }

            &--checked {
              .picker-value {
                color: $color-brand;
              }
            }
          }

          .at-checkbox {
            display: flex;

            &__title {
              font-size: $font-size-sml;
            }
          }

          .date-picker-tag {
            display: inline-flex;
            align-items: center;
            min-width: calc((100% - #{$spacing-v-lg} * 2) / 3);
            justify-content: center;
            vertical-align: top;

            .at-icon-close-circle {
              margin-left: $spacing-h-md;
              color: $color-grey-3;
            }
          }

          .at-date-picker,
          .at-date-picker-ali,
          .at-date-range-picker {
            font-size: $font-size-base;

            .picker-placeholder {
              color: $color-grey-1;
            }
          }

          .text-placeholder {
            color: $color-grey-1;
          }

          #{$Component}_date-range-item {
            .at-radio-tag {
              margin-bottom: $spacing-v-lg;
            }
          }

          #{$Component}_radio-item {
            max-height: calc(132px + #{$spacing-v-lg});
            overflow: hidden;

            &.expand {
              max-height: initial;
            }

            &.show-all-text {
              .at-radio__tag {
                flex: 0 0 auto;
                margin-right: $spacing-v-lg;
              }
            }
          }
        }
      }
    }

    &-footer {
      padding: 25px 30px;
      display: flex;
      @include hairline-top();

      .reset-btn {
        margin-right: $spacing-h-lg;
      }

      .reset-btn,
      .ok-btn {
        flex: 1;
      }
    }
  }
}