@use '../../../styles/buttons';
@use '../../../styles/inputs';
@import '../../../styles/palette';

:host {
  form {
    padding: 16px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
  }

  mat-slide-toggle {
    position: absolute;
    right: 0;
    width: 120px;
    padding: 16px;
  }

  .wrapper {
    display: flex;
    flex-direction: row;
    border: 1px solid $main-20;
    border-radius: $default-border-radius;

    &.ng-invalid {
      border: 1px solid $red-60;
    }

    .filter-input {
      border: none;
    }

    .wrapper-field, .filter-input > .wrapper-field {
      border: none;

      &:focus-visible {
        outline: none;
        box-shadow: none;
      }
    }

    .wrapper-glue {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 8px;
      color: $main-40;
    }

    .wrapper-glue-start {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 8px;
      border-bottom-left-radius: $default-border-radius;
      border-top-left-radius: $default-border-radius;
      color: $main-40;

      @media screen and (max-width: 1625px){
        padding: 0 4px;
      }
    }

    &:hover {
      @include inputs.hover;

      .wrapper-glue, .wrapper-glue-start {
        color: $main-60;
      }
    }

    &:focus-visible {
      @include inputs.focus-visible;

      .wrapper-glue, .wrapper-glue-start {
        color: $main-60;
      }
    }
  }

  .filter-title {
    margin: 2px 20px 2px 20px;
    font-size: 14px;
  }

  .filter-input {
    height: 40px;

    .mat-mdc-text-field-wrapper {
      padding: 0 8px;
    }
  }

  .correlation-field{
    @media screen and (max-width: 1625px){
      width: 175px;
    }

    @media screen and (max-width: 1550px){
      width: 160px;
    }
  }

  .right-padding {
    padding-right: 2px;
  }

  .filter-button {
    background: $main-100;
    color: $main-0;
    border-radius: $default-border-radius;
    height: 40px;
    width: 120px;
  }

  @keyframes spinner {
    to {
      transform: rotate(360deg);
    }
  }

  .spinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    border-top-color: #000000;
    animation: spinner .8s linear infinite;
  }

  .clear-button {
    @include buttons.button-white;
    border-radius: $default-border-radius;
  }

  .date-picker-form-field {
    display: flex;
    flex-direction: column;
    justify-content: center;

    @media screen and (max-width: 1600px) {
      width: 170px;
    }
  }

  .form-control {
    position: relative;

    .validation-error {
      position: absolute;
      top: 44px;
      font-size: 12px;
      color: $red-60;
    }
  }
}
