// Top
.top {
  @extend %background-secondary-color;
  font-size: 11px;
  font-weight: 600;
  position: relative;
  z-index: 1002;

  .dropdown {
    &:hover {
      .dropdown-menu {
        visibility: visible;
        opacity: 1;
      }
    }
  }

  .dropdown-menu {
    min-width: 45px;

    &.show-menu {
      opacity: 1;
      visibility: visible;
    }

    > li{
      .last {
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
      }

      > a {
        @extend %background-secondary-color;
        text-align: left;
        font-size: 11px;
        padding: 6px 10px;
        color: $dark-color;
        font-weight: 400;
        border-bottom: 1px solid lighten($secondary-color, 10%);

        &:hover {
          background-color: lighten($secondary-color, 10%);
          color: $lighter-color;
        }
      }
    }
  }

  .nav {
    .caret {
      border-top-color: $dark-color;
    }

    > li {
      display: inline-block;
      float: none;

      > a {
        color: $dark-color;
        padding: 0 5px;
        background: none;
      }
      &:hover {
        .caret,
        a {
          color: $default-color;
          border-top-color: $default-color;
        }
      }
    }
  }
}

.top__slogan,
.top__menu {
  text-align: center;
  color: $dark-color;
}

// On non mobile screens
@media (min-width: $screen-sm-min) {
  .top__slogan {
    text-align: left;
    padding: 7px 0;
  }

  .top__menu {
    text-align: right;
  }
}