.main-nav-bar {
  @mixin active-category-button {
    border-bottom-color: $header-font-color;
  }

  &-item {
    text-transform: uppercase;
    font-size: 20px;
    font-weight: $font-weight-medium;
    a {
      color: theme-color('dark-text');

      &:hover {
        text-decoration: none;
      }
    }
  }
  &-dropdown {
    &-toggle {
      background: none;
      border: none;
      padding: 0;
      margin: 0;
      &:focus {
        outline: none;
      }
    }
  }
  &-category {
    $self: &;

    position: static;

    &:hover {
      #{$self}-dropdown {
        display: block;
      }
      #{$self}-button {
        color: $header-font-color;
        text-decoration: none;
        @include active-category-button;
      }
    }

    &-button {
      background: none;
      border: none;
      border-bottom: 3px solid transparent;
      color: $header-font-color;
      margin: 0;
      &:focus {
        outline: none;
      }
    }

    &-dropdown {
      padding: 51px 0px 51px 0px;
      min-height: 341px;
      left: 0;
      right: 0;
      width: 100%;
      position: absolute;
      top: $spree-header-mobile-height;
      margin: 0;
      border: none;
      z-index: 1000;
      display: none;
      background: $meganav-background;
      background-clip: padding-box;
      border-top: 1px solid $global-border-style;

      form {
        input#keywords {
          color: theme-color('dark-text');
          font-size: font-px-to-rem(14px);
          width: calc(100% - 40px);
          &:focus {
            outline: none;
          }
          &::placeholder {
            color: theme-color('borders');
          }
          &::-webkit-search-cancel-button {
            display: none;
          }
          @include media-breakpoint-up(md) {
            font-size: font-px-to-rem(22px);
          }
        }
        input[type='submit'] {
          display: none;
        }
      }

      @include media-breakpoint-up(xl) {
        top: $spree-header-desktop-height - 1px;
      }
    }
  }

  .spree-icon {
    color: theme-color('dark-text');
  }
}