/*!
 * 
  * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */

@import "../variables";
@import "../variables/filters_vars";
@import "../mixins";

.dlt-filter {
  @include component-vars(filters); //Mixin to define all the root variables
  background-color: $filters-color-background;
  @include box-shadow(inset 0 -1px 0 0 $filters-color-border, inset 0 $filters-border-width 0 0 $filters-color-border);

  &__title {
    width: 100%;

  }

  &__caret{
    margin-right: 1rem;
  }
  
  &__button {
    position: relative;
    height: $filters-title-height;
    font-size: $filters-title-font-size;
    font-family: $filters-title-font-family;
    font-weight: $filters-title-font-weight;
    color: $filters-color-title;
    line-height: $filters-title-height;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: left;
    justify-content: left;
    margin-top: -2px;
    background: transparent;
    padding: $filters-title-padding;
    border-radius: $filters-border-radii;
    border: $filters-border-width-hover $filters-border-style-hover transparent;
    outline: none;

    // &:after{
    //   content: " ";
    //   position: absolute;
    //   bottom: -2px;
    //   left: -2px;
    //   width: calc(100% + 4px);
    //   height: $filters-border-width;
    //   background: $filters-color-border;
    // }

    &:focus {
      border: $filters-border-width-hover $filters-border-style-hover $filters-color-primary;
      background: $filters-color-background-focus;
      color: $filters-color-text-focus;
      outline: none;
      box-shadow: none;
      &:after{
        content: none;
      }
    }

    &:active {
      border: $filters-border-width-hover $filters-border-style-hover $filters-color-primary;
      background: $filters-color-background-active;
      color: $filters-color-text-active;
      outline: none;
      box-shadow: none;
      &:after{
        content: none;
      }
    }

  }

  &__panel {
    padding: $filters-panel-padding;
    display: none;
    align-items: flex-start;

    &--open {
      display: flex;
    }

    &-items {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      flex: 7.5;
    }

    &-item {
      margin: $filters-panel-item-margin;
      width: $filters-panel-item-width;
    }

    &-actions {
      flex: 1;
      display: flex;
      align-items: flex-end;
      margin: $filters-actions-margin;

      * {
        margin: 0 0.5rem 0 0;
      }
    }
  }

  &__tags {
    padding: $filters-tags-padding;
    display: none;

    .dlt-tags__item{
      margin: $filters-tags-margin!important;
    }

    &-clear {
      display: inline-block;
      margin-bottom: .25rem;
    }

    &--open {
      display: inline-block;
    }

  }

}