site-search.scss

.button--search {
  align-items: center;
  background: transparent;
  border: 0 none;
  display: flex;
  padding: 12px;
  flex-direction: row;

  @include breakpoint($narrow) {
    padding: 15px 5px;
  }

  @include breakpoint($wide) {
    flex-direction: row-reverse;
    padding: 0;

    &:focus {
      outline: solid 2px var(--additional-yellow);
      outline-offset: 2px;
    }
  }

  &.is-open--menu {
    position: absolute;
    right: 50px;
    top: 15px;
    z-index: 101;
  }

  &__label {
    @include font-size(14px, 14px);
    @include font-weight($bold);
    color: var(--site-logo-color);
    display: none;
    font-family: var(--main-font-family);
    letter-spacing: -0.9px;
    margin-left: 4px;
    visibility: hidden;

    @include breakpoint($narrow) {
      @include font-size(15px, 24px);
      margin-left: 4px;
      text-transform: uppercase;
    }

    @include breakpoint($wide) {
      @include font-size(14px, 24px);
      display: block;
      font-weight: 600;
      letter-spacing: -0.5px;
      text-transform: none;
      visibility: visible;
    }

    @include breakpoint($extrawide) {
      @include font-size(12px, 12px);
      font-weight: 400;
      letter-spacing: -0.6px;
    }

    @include breakpoint($xlarge) {
      @include font-size(14px, 24px);
      letter-spacing: -0.5px;
    }

    &__group {
      color: var(--grayscale-white);
    }
  }

  svg {
    height: 20px;
    width: 20px;

    @include breakpoint($wide) {
      height: 16px;
      width: 16px;
    }
    @include breakpoint($extrawide) {
      height: 12px;
      width: 12px;
    }
    @include breakpoint($xlarge) {
      height: 16px;
      width: 16px;
    }
  }

  &:hover {
    color: var(--brand-main);
    cursor: pointer;

    span {
      color: var(--brand-main);
    }
    svg {
      fill: var(--brand-main);
    }
  }
  &--group {
    &:hover {
      color: var(--grayscale-medium);

      span {
        color: var(--grayscale-medium);
      }

      svg {
        fill: var(--grayscale-medium);
      }
    }
  }
}

.site-search {
  &__panel {
    display: none;
    &__is-open {
      background-color: #f8f8f8;
      border: 1px solid rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      font-family: var(--main-font-family);
      left: 0;
      position: absolute;
      width: 100%;
      z-index: 520;
    }

    &__title {
      &__group {
        align-items: baseline;
        display: flex;
        flex-direction: column;

        @include breakpoint($wide) {
          align-items: baseline;
          flex-direction: row;
          justify-content: flex-start;
        }
      }

      h1 {
        @include font-size(32px, 32px);
        @include font-weight($bold);
        color: var(--grayscale-black);
        letter-spacing: -1px;
        margin-bottom: 12px;
        margin-top: 20px;
        text-transform: uppercase;

        @include breakpoint($narrow) {
          @include font-size(46px, 48px);
          letter-spacing: -1.5px;
          margin-top: 24px;
        }
        @include breakpoint($xlarge) {
          @include font-size(52px, 54px);
          letter-spacing: -1.6px;
        }
      }
      .description {
        @include font-size(12px, 16px);
        color: var(--grayscale-black);
        letter-spacing: -0.2px;
        margin-bottom: 16px;
        padding: 0;

        @include breakpoint($narrow) {
          @include font-size(16px, 22px);
          letter-spacing: -0.1px;
          margin-bottom: 18px;
        }
        @include breakpoint($wide) {
          @include font-size(18px, 24px);
          letter-spacing: -0.1px;
          padding-left: 8px;
        }
        @include breakpoint($xlarge) {
          @include font-size(20px, 28px);
          letter-spacing: -0.2px;
          padding-left: 12px;
        }
      }
    }

    &__wrapper {
      margin: 0 auto;
      max-width: 100%;
      padding: 0 1rem 2rem;
      width: 100%;

      @include breakpoint($narrow) {
        max-width: 1216px;
        padding: 0 0 2rem;
      }
      @include breakpoint($xlarge) {
        padding: 0 0 4rem;
      }
    }

    &__panel-toggle {
      background-color: transparent;
      border: none;
      position: absolute;
      right: 1rem;
      top: 25px;

      @include breakpoint($narrow) {
        right: 2rem;
        top: 36px;
      }
      @include breakpoint($xlarge) {
        top: 45px;
      }

      &__label {
        @include font-size(14px, 22px);
        @include font-weight($bold);
        align-items: center;
        color: var(--grayscale-black);
        display: flex;
        letter-spacing: -0.44px;
        text-transform: uppercase;

        &__title {
          padding-right: 8px;
        }

        @include breakpoint($xlarge) {
          @include font-size(18px, 22px);
          letter-spacing: -0.56px;
        }
      }

      &:focus,
      &:hover {
        cursor: pointer;
        span {
          color: var(--brand-main);
        }
        svg {
          fill: var(--brand-main);
        }
      }
    }

    &__tools {
      .title {
        @include font-size(16px, 20px);
        @include font-weight($bold);
        color: var(--brand-main-nearly-black);
        letter-spacing: -0.5px;
        text-transform: uppercase;

        @include breakpoint($narrow) {
          @include font-size(18px, 24px);
          letter-spacing: -0.56px;
          margin: 32px 0 16px;
        }
      }

      .list {
        a.search-special-tool {
          align-items: center;
          background-color: var(--grayscale-white);
          display: flex;
          margin-bottom: 8px;
          text-decoration: none;

          .label {
            @include font-size(14px, 16px);
            @include font-weight($bold);
            color: var(--brand-main-nearly-black);
            letter-spacing: -0.44px;
            padding-left: 8px;

            @include breakpoint($narrow) {
              @include font-size(16px, 20px);
              letter-spacing: -0.5px;
              padding-left: 12px;
            }
          }
          .description {
            display: none;
            @include breakpoint($wide) {
              @include font-size(14px, 18px);
              color: var(--grayscale-dark);
              display: flex;
              letter-spacing: -0.2px;
              padding-left: 12px;
            }
            @include breakpoint($xlarge) {
              @include font-size(16px, 24px);
              color: var(--grayscale-dark);
              display: flex;
              letter-spacing: 0;
              padding-left: 12px;
            }
          }

          hy-icon {
            height: 40px;
            width: 40px;

            svg {
              background-color: var(--brand-main-light);
              fill: var(--grayscale-white);
              height: 40px;
              padding: 8px;
              width: 40px;
            }
          }
        }
      }
    }
  }
}