@import 'cards';
@import "variables";
@import "colors";


.navbar {
  @extend .card-2-static;

  @media screen and (min-width: map-get($screen-widths, 'xl')) {
    padding-left: 100px !important;
    padding-right: 100px !important;
  }
  @media screen and (min-width: map-get($screen-widths, 'xxl')) {
    padding-left: 150px !important;
    padding-right: 150px !important;
  }

  font-size: 18px;
  min-height: 79px;
}

.nav-link {
  display: inline-block !important;
  padding: 8px !important;
}

.menu-link:hover {
  text-decoration: underline !important;
}

.nav-link-selected {
  text-decoration: underline;
}

.nav-item {
  cursor: pointer;
  padding: 0 10px;

  @media screen and (max-width: map-get($screen-widths, 'md')) {
    padding: 10px;
  }
}

.navbar-light .navbar-nav .nav-link {
  color: $dark-color;
}


.navbar-profile {
  position: relative;
  cursor: pointer;
}

.navbar-profile-label {
  display: inline-block;
  position: relative;
  top: 8px;

  @media screen and (min-width: map-get($screen-widths, 'lg')) {
    padding-left: 35px;
  }

  @media screen and (max-width: map-get($screen-widths, 'md')) {
    padding-left: 35px;
  }
}

.navbar-profile-icon {
  position: absolute;
  top: 8px;

  @media screen and (max-width: map-get($screen-widths, 'md')) {
    top: 18px;
  }
}

.navbar-login-button {
  width: 140px;
  padding: 6px 12px;

  @media screen and (max-width: map-get($screen-widths, 'md')) {
    margin-bottom: 20px;
  }
}