.main-nav-bar {
  &-item {
    text-transform: uppercase;
    font-size: 20px;
    font-weight: $font-weight-medium;
    padding: 0 1.5rem;
    height: 100%;
    a {
      color: theme-color('dark-text');

      &:hover {
        text-decoration: none;
      }
    }
  }
  &-category {
    $self: &;
    display: flex;
    position: static;

    &:hover, &.show {
      #{$self}-button {
        color: $header-font-color;
        text-decoration: none;
        &:after {
          border-bottom-color: $header-font-color;
        }
      }
    }

    #{$self}-button.active {
      color: $header-font-color;
      text-decoration: none;
      &:after {
        border-bottom-color: $header-font-color;
      }
    }

    .dropdown-item {
      width: auto;
      padding: 0;
      background-color: transparent;
      &:hover, &:focus {
        background-color: transparent;
      }
      &.active {
        color: $header-font-color;
        text-decoration: underline;
      }
    }

    &-button {
      background: none;
      border: none;
      color: $header-font-color;
      margin: 0;
      display: flex;
      align-items: center;
      position: relative;
      &:after {
        content: '';
        display: block;
        width: calc(100% - 2rem);
        position: absolute;
        left: 1rem;
        bottom: 0.75rem;
        padding: 0;
        margin: 0;
        border: 0;
        border-bottom: 3px solid transparent;
      }
    }

    &-dropdown {
      min-height: 341px;
      left: 0;
      right: 0;
      width: 100%;
      position: absolute;
      top: $spree-header-mobile-height;
      margin: 0;
      border: none;
      z-index: 1000;
      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');
  }
}