main {
  .top-bar {
    background-color: $white;
    display: flex;
    flex-direction: column-reverse;

    &__nav {
      font-size: 75%;
    }

    a.top-bar__countdown {
      background-color: $white;
      color: $gray-700;
      filter: drop-shadow(8px 8px 10px $gray-500);
    }
  }

  .header {
    border-bottom: none;
    background-color: $white;

    &__nav a {
      color: $secondary;

      &:hover {
        border-bottom-color: $gray-600;
        color: $gray-500;
        background-color: transparent;
      }
    }
  }

  #search-input {
    border: solid 1px $gray-200;
  }

  #cart-button {
    i:before {
      content: "";
      display: inline-block;
      background-color: $secondary;
      width: 36px;
      height: 36px;
      -webkit-mask: url("https://ecom.nyc3.digitaloceanspaces.com/storefront/clean/cart.svg") no-repeat 50% 50%;
      mask: url("https://ecom.nyc3.digitaloceanspaces.com/storefront/clean/cart.svg") no-repeat 50% 50%;
      -webkit-mask-size: cover;
      mask-size: cover;
    }

    @media (hover: hover) {
      i:hover:before {
        background-color: $primary;
      }
    }
  }

  #user-button {
    i:before {
      content: "";
      display: inline-block;
      background-color: $secondary;
      width: 36px;
      height: 36px;
      -webkit-mask: url("https://ecom.nyc3.digitaloceanspaces.com/storefront/clean/login.svg") no-repeat 50% 50%;
      mask: url("https://ecom.nyc3.digitaloceanspaces.com/storefront/clean/login.svg") no-repeat 50% 50%;
      -webkit-mask-size: cover;
      mask-size: cover;
    }

    @media (hover: hover) {
      i:hover:before {
        background-color: $primary;
      }
    }
  }

  .info-bar {
    background-color: $secondary;
  }

  .footer {
    background-color: $white;
  }

  .go-to-top {
    background-color: $secondary;
  }
}