.search-filter {
  background-color: $gallery-100;
  padding: $base-spacing;
  margin-bottom: $base-spacing-2x;

  .filter-criteria {
    display: flex;
    flex-wrap: wrap;
    margin-top: $base-spacing;

    .tag {
      margin-right: $base-spacing;
    }
  }

  .filter {
    display: flex;
    flex-wrap: wrap;
    position: relative;

    .select {
      background-color: $jaguar-700;
      display: flex;
      flex-direction: column;
      position: relative;
      flex: 1;
      margin-right: $base-spacing;

      &-toggle {
        padding: $base-spacing;
        padding-right: $base-spacing-3x;
        height: 16px;
        font-size: 16px;
        line-height: 1;
        letter-spacing: 0.5px;
        color: $base-white;
        border: 1px solid $boulder-400;
        position: relative;
        display: flex;
        align-items: center;
        cursor: pointer;

        &::after {
          content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23ffffff"><path fill-rule="evenodd" d="M20.7343997,7.20340672 C21.0369343,6.9196125 21.5124245,6.93461618 21.7964369,7.23691839 C22.05463,7.51173857 22.0656928,7.92938754 21.8382717,8.21627127 L21.7628995,8.29813984 L12.8478053,16.6609927 C12.4000257,17.0810349 11.7203768,17.1107014 11.2398501,16.7502163 L11.1326902,16.6601017 L2.23653106,8.29760525 C1.93429195,8.01349685 1.91977114,7.53835648 2.20409793,7.23634952 C2.46257683,6.96179775 2.87905475,6.92484705 3.17971854,7.1338526 L3.26616944,7.20394131 L11.9903648,15.4047756 L20.7343997,7.20340672 Z"/></svg>');
          position: absolute;
          right: $base-spacing;
        }

        &.active {
          background-color: $sky-blue-500;
          border-color: $sky-blue-500;

          &::after {
            content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23ffffff"><path fill-rule="evenodd" d="M20.7343997,7.20340672 C21.0369343,6.9196125 21.5124245,6.93461618 21.7964369,7.23691839 C22.05463,7.51173857 22.0656928,7.92938754 21.8382717,8.21627127 L21.7628995,8.29813984 L12.8478053,16.6609927 C12.4000257,17.0810349 11.7203768,17.1107014 11.2398501,16.7502163 L11.1326902,16.6601017 L2.23653106,8.29760525 C1.93429195,8.01349685 1.91977114,7.53835648 2.20409793,7.23634952 C2.46257683,6.96179775 2.87905475,6.92484705 3.17971854,7.1338526 L3.26616944,7.20394131 L11.9903648,15.4043523 L20.7343997,7.20340672 Z" transform="matrix(1 0 0 -1 0 24)"/></svg>');
          }
        }
      }

      &-menu {
        list-style: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: $base-white;
        margin-top: 4px;
        width: 100%;
        padding: 0;
        z-index: 1;
        box-shadow: $base-elevation-card;
        display: none;
        opacity: 0;
        transition: opacity ease-out 0.5s;
        max-height: 300px;
        overflow-y: auto;

        li {
          display: flex;
          letter-spacing: 0.5px;
          line-height: 1;
          color: $boulder-400;
          font-size: 16px;
          transition: background-color ease-out 0.3s;

          label {
            padding: $base-spacing;
            cursor: pointer;
            width: 100%;
            display: inline-flex;
            align-items: baseline;
            line-height: 1.25;

            input {
              margin-right: $base-spacing;
            }
          }

          &:not(.select-menu-title):hover {
            background-color: $boulder-400;
            color: $base-white;
          }

          &.active {
            background-color: $boulder-400;
            color: $base-white;
          }
        }

        &.showing {
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
        }

        &.show {
          opacity: 1;
        }

        &.full-width {
          width: 100%;
          flex-direction: row;

          li.select-menu-title {
            width: 100%;
            padding: $base-spacing;

            div.select-menu-title-section {
              border-bottom: 1px solid $gallery-100;
              padding-bottom: $base-spacing;
              display: flex;
              align-items: center;
              width: 100%;
              gap: $base-spacing;

              h5 {
                padding-right: $base-spacing;
                border-right: 1px solid $nobel-300;
              }

              .toggle-all a {
                color: $sky-blue-500;
              }
            }
          }

          li.select-menu-option {
            width: 20%;
          }
        }
      }
    }

    .datepicker {
      .select-toggle {
        &::after {
          content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="%23ffffff"><defs><path id="calendar-a" d="M8,2 C8.55228475,2 9,2.44771525 9,3 L9,5 L15,5 L15,3 C15,2.44771525 15.4477153,2 16,2 L17,2 C17.5522847,2 18,2.44771525 18,3 L18,4.99949514 L20.503897,4.99949514 C21.2835932,4.99949514 21.9243457,5.59438322 21.9970305,6.35503512 L22.003897,6.49949514 L22.003897,20.4992478 C22.003897,21.2789439 21.409009,21.9196964 20.6483571,21.9923812 L20.503897,21.9992478 L3.50240705,21.9992478 C2.72271093,21.9992478 2.08195837,21.4043597 2.00927363,20.6437078 L2.00240705,20.4992478 L2.002,11 L2,11 L2,10 L2.002,10 L2.00240705,6.49949514 C2.00240705,5.71979902 2.59729513,5.07904646 3.35794704,5.00636171 L3.50240705,4.99949514 L6,4.99949514 L6,3 C6,2.44771525 6.44771525,2 7,2 L8,2 Z M21.003,11 L3.002,11 L3.00240705,20.4992478 C3.00240705,20.7447076 3.17928221,20.9488561 3.41253142,20.9911921 L3.50240705,20.9992478 L20.503897,20.9992478 C20.7493569,20.9992478 20.9535054,20.8223726 20.9958414,20.5891234 L21.003897,20.4992478 L21.003,11 Z M6,5.99949514 L3.50240705,5.99949514 C3.25694716,5.99949514 3.05279868,6.1763703 3.01046272,6.4096195 L3.00240705,6.49949514 L3.002,10 L21.003,10 L21.003897,6.49949514 C21.003897,6.25403525 20.8270219,6.04988677 20.5937727,6.0075508 L20.503897,5.99949514 L18,5.99949514 L18,7 C18,7.55228475 17.5522847,8 17,8 L16,8 C15.4477153,8 15,7.55228475 15,7 L15,6 L9,6 L9,7 C9,7.55228475 8.55228475,8 8,8 L7,8 C6.44771525,8 6,7.55228475 6,7 L6,5.99949514 Z M8,3 L7,3 L7,7 L8,7 L8,3 Z M17,3 L16,3 L16,7 L17,7 L17,3 Z"/></defs><use fill-rule="evenodd" xlink:href="%23calendar-a"/></svg>');
          position: absolute;
          right: $base-spacing;
        }
      }
    }

    .filter-sidebar {
      background-color: $base-black;
      position: fixed;
      width: 60%;
      top: 0;
      right: -60%;
      height: 100%;
      z-index: 1;
      transition: right ease-out 0.3s;

      .filter-section {
        background-color: $baltic-sea-600;
        display: flex;
        flex-direction: column;
      }

      .sidebar-name {
        color: $nobel-300;
        font-size: $base-font-site;
        line-height: 1;
        text-decoration: none;
        padding: $base-spacing;
        margin-bottom: 2px;
        border-bottom: 1px solid $nobel-300;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      nav {
        color: $base-white;

        .filter-nav {
          display: flex;
          float: left;
          height: 100%;
          padding: 0;
          width: 100%;
          list-style: none;
          margin: 0;

          > li {
            position: relative;
            border-bottom: none;
            padding-left: 4px;
            margin-right: 0;
            margin-bottom: 2px;
            transition: $base-transition-background;

            .arrow {
              width: 14px;
              height: 14px;
              margin-left: 8px;
              margin-right: 16px;

              &.up {
                display: none;
              }
            }

            div {
              height: 100%;
            }

            .nav-link {
              padding: 16px 0 16px 12px;
              font-size: $base-font-header;
              font-weight: 500;
              letter-spacing: 0.5px;
              line-height: 1;
              flex-grow: 100;
              border-left: 1px solid #0069AA;
              color: #FFFFFF;
              text-decoration: none;

              &.without-arrow {
                padding-right: 16px;
              }
            }
          }

          @media only screen and (min-width: map-get($base-breakpoints, 'lg')) {
            > li:hover {
              background-color: unset;

              > div {
                background-color: $tundra-500;
                border-left: 1px solid $tundra-500;
              }

              .nav-link {
                border-left: none;
              }

              .up {
                display: block;
              }

              .down {
                display: none;
              }

              .select {
                &-menu {
                  display: block;
                  opacity: 1;
                  position: relative;
                  background-color: $tundra-500;

                  li.select-menu-title {
                    width: unset;
                  }

                  li.select-menu-option {
                    width: 100%;
                    color: $base-white;
                  }

                  &-title {
                    &-section {
                      .toggle-all a {
                        color: $base-white;
                      }
                    }
                  }
                }
              }
            }
          }

          @media only screen and (max-width: map-get($base-breakpoints, 'lg')) {
            > li.active {
              background-color: unset;

              > div {
                background-color: $tundra-500;
                border-left: 1px solid $tundra-500;
              }

              .nav-link {
                border-left: none;
              }

              .up {
                display: block;
              }

              .down {
                display: none;
              }

              .select {
                &-menu {
                  display: block;
                  opacity: 1;
                  position: relative;
                  background-color: $tundra-500;

                  li.select-menu-title {
                    width: unset;
                  }

                  li.select-menu-option {
                    width: 100%;
                    color: $base-white;
                  }

                  &-title {
                    &-section {
                      .toggle-all a {
                        color: $base-white;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      .white-filter-bg {
        justify-content: flex-end;
      }

      &.show {
        right: 0;
      }
    }

    @media only screen and (max-width: map-get($base-breakpoints, 'lg')) {
      flex-direction: column;

      .filter-criteria {
        .tag {
          margin-bottom: $base-spacing-1-4th;
        }
      }

      .select {
        flex-basis: 40%;

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

      .white-filter-bg {
        margin-bottom: $base-spacing-1-4th;
      }
    }

    @media only screen and (max-width: map-get($base-breakpoints, 'md')) {
      .filter-criteria {
        flex-direction: column;

        .tag {
          margin-right: 0;
          margin-bottom: $base-spacing-1-4th;
          justify-content: space-between;
        }
      }

      .filter-sidebar {
        width: 90%;
        right: -90%;
      }
    }
  }

  .white-filter-bg {
    display: flex;
    background: $base-white;

    a {
      width: 100%;
      text-align: center;
    }
  }
}

@media only screen and (max-width: map-get($base-breakpoints, 'lg')) {
  .search-filter.desktop {
    display: none;
  }
}

@media only screen and (min-width: map-get($base-breakpoints, 'lg') + 1) {
  .search-filter.mobile {
    display: none;
  }
}