// scss-lint:disable NestingDepth SelectorDepth

.filter-container {
  position: initial;

  .filter-dropdown {
    padding: 0;
    width: 230px;

    .header {
      align-items: center;
      border-bottom: $border-default;
      display: flex;
      height: 2.75em;
      margin-bottom: 1em;
      padding: 0  .3em 0 1em;

      .title {
        @include font-h2;
        flex-grow: 1;
        user-select: none;

      }
    }

    .select-block {
      display: inline-block;
      padding: 0 1em 1em;
      position: relative;
      width: 100%;

      label {
        @include font-small;
        font-weight: bold;
        margin-bottom: .3em;
        user-select: none;
      }
    }

    .text-search-filter {
      &.open {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    .recent-searches {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      left: auto;
      margin-top: -1px;
      top: auto;
      width: calc(100% - 2em);

      label {
        @include font-small;
        color: $color-silver-chalice;
        font-weight: bold;
        margin-bottom: .3em;
        padding: 0 1.5em;
        user-select: none;
      }

      .projects-search-keyword {
        @include font-button;
        padding: .5em 1.25em;

        .keyword-text {
          margin-left: .25em;
        }
      }
    }

    .footer {
      align-items: center;
      border-top: $border-default;
      display: flex;
      height: 4.25em;
      justify-content: center;
      padding: 0 1em;
      position: relative;
      width: 100%;
    }
  }

  &.filters-applied .filter-button::after {
    @include red-dot;
    right: .35em;
    top: .3em;
  }

  .connect-line {
    background: $input-border;
    height: 10px;
    margin: 5px auto;
    width: 2px;
  }

  @media (min-width: 768px) {

    .filter-dropdown {
      width: 460px;
    }

    .footer:not(.center) {
      .btn:last-child {
        margin-left: auto;
      }
    }

    .datetime-picker-container {
      display: inline-block;
      width: 46%;
    }

    .connect-line {
      display: inline-block;
      margin: 0 11px;
      position: relative;
      top: 2px;
      transform: rotate(90deg);
    }
  }
}
