// Site-Header
.site-header {
   padding: 15px 0;
   background: $blue-dark;
   @include position(fixed, $top: 0, $right: 0, $left: 0, $height: 80px);
   @include transition(all 0.5s ease);
   z-index: 999;

   &--small {
      align-items: center;
      display: flex;
      padding: 5px 0;
      height: 55px;
      .logo-tickantel {
         height: 20px !important;
         a {
            height: 20px !important;
         }
      }
      @media (max-width: $large) {
         padding: 10px 0;
         height: 55px !important;
      }
   }

   @media (max-width: $large) {
      height: 110px;
   }

   .logo-tickantel {
      align-items: center;
      display: flex;
      margin-right: 20px;
      @media (min-width: $medium) {
         height: 40px;
         display: flex;
         align-items: center;
      }

      a {
         background: url(../assets/svg/logo-tickantel.svg) center left no-repeat;
         display: block;
         height: 25px;
         width: 100px;
         text-indent: -9999px;
      }

      p {
         color: $orange;
         margin: 3px 0 0 5px;
         font: {
            size: 18px;
            weight: 600;
         }
      }
   }

   .language {
      margin-right: 20px;
      a {
         text-decoration: none;
         &.active {
            color: white;
            font-weight: 600;
         }
      }
      @media (max-width: $medium) {
         margin-top: -20px;
         margin-right: 30px;
      }
   }

   .nav-user {
      margin-top: 5px;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      li {
         margin-bottom: 15px;
      }

      .btn {
         margin: 0;
         &.btn-sm {
            @media (max-width: $small) {
               padding: 8px 16px;
            }
         }
      }
      a {
         @media (max-width: $small) {
            font-size: 20px !important;
            span {
               font-size: 18px !important;
               margin-left: 4px;
            }
            &.text-white {
               span {
                  color: white !important;
               }
            }
         }
         &:hover {
            color: white !important;
            &.btn {
               border-color: white !important;
               color: white;
            }
            span {
               color: white !important;
            }
            i {
               cursor: pointer;
               color: white !important;
               &:hover {
                  color: white !important;
               }
            }
         }
      }
   }

   .login-box {
      border: 2px solid $primary;
      padding: 40px;
      @include border-radius(0);
      @include position(absolute, $right: 0, $top: 20px !important, $left: auto, $width: 300px);

      .recuperar-contrasena {
         margin-bottom: 40px;
         a {
            &:hover {
               color: #04080e !important;
            }
         }
      }
      .registro-user {
         margin-top: 40px;
      }
      a:hover.btn {
         border-color: black !important;
         color: black!important;
      }
   }

   .flex-left {
      @media (max-width: $medium) {
         flex-wrap: wrap;
         justify-content: space-between;
      }
   }
}

.micrositio {
   .site-header {
      height: 55px;
      @media (min-width: $small) {
         padding: 5px 0;
      }
      .logo-tickantel {
         margin-top: 0px;
         a {
            height: 20px;
         }
      }
   }
   .header-cat {
      display: none;
   }
   .nav-user {
      margin: 0;
   }
}

.header-cat {
   background: darken($blue-dark, 10%);
   display: flex;
   justify-content: center;
   padding: 10px 0;
   @include position(absolute, $top: 80px, $left: 0, $right: 0);
   li:first-child {
      &:before {
         display: none;
      }
   }
   a {
      color: white;
      text-decoration: none;
      @media (max-width: $small) {
         span {
            font-size: 12px;
         }
      }
   }

   @media (max-width: $medium) {
      @include position(relative, $top: auto, $left: 0, $right: 0);
      margin-bottom: 20px;
   }
}

.navigation {
   background: white;
   @include position(fixed, $top: 0, $left: -320px, $height: 100vh, $width: 320px);
   padding: 20px 30px;
   overflow-y: auto;
   z-index: 9999;
   .nav-user {
      margin: 40px 0;
      flex-direction: column;
      align-items: start;
      @media (max-width: $small) {
         margin: 0;
      }
      .box-login {
         display: block;
      }
      .btn {
         margin-top: 40px;
         @media (max-width: $small) {
            margin-top: 0;
         }
      }
      ul {
         margin: 40px 0;
      }
   }
}

// Cambiar con el buscador full mobile
.site-header {
   @media (max-width: $medium) {
      .d-flex {
         justify-content: space-between;
         flex-wrap: wrap;
         .w-100 {
            flex-basis: 100%;
         }
      }
   }
}

.site-ventanilla {
   .site-header {
      @media (max-width: $medium) {
         height: auto;
      }
   }
}