@import "lb-vars";

div#istoreheader {
   height: calc(120px + 48px);

   header {
      position: relative;

      div.top {
         height: 120px;
         display: flex;
         justify-content: center;
         background-color: @color-header-top-bg;
         align-items: stretch;
         align-content: stretch;

         div.headerimage {
            flex-shrink: 1;
            width: 100%;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            &.left {
               background-image: url('../res/v2/header/left.jpg');
            }
            &.right{
               background-image: url('../res/v2/header/right.jpg');
            }
         }
      }

      div.logo {
         position: absolute;
         top: 0;
         left: calc(50% - (250px / 2));
         height: 120px;
         overflow: visible;

         a.logo {
            position: relative;
            display: block;
            width: 250px;
            height: 162px;
            background-image: url("../res/v2/img_logo.png");
            background-repeat: no-repeat;
            background-size: contain;
            z-index: 10;

            &._navidad {
               background-image: url("../res/v2/img_logo_navidad.png");
            }

            &._sanantoniu {
               background-image: url("../res/v2/img_logo_sanantoniu.png");
            }
         }
      }

      div.bottom {
         position: relative;
         background-color: @color-nav-bg;
         height: 48px;
         border-top-left-radius: 8px;
         border-top-right-radius: 8px;

         nav {
            position: absolute;
            top: 0;
            width: 48%;
            height: 100%;
            display: flex;

            > div.nav-item {
               position: relative;
               align-self: center;
               margin: 0 1em 0 1em;


               section {
                  display: none;
                  flex-direction: column;
                  position: absolute;
                  top: calc(48px - 24px);
                  padding: 0 0.5em 0 0.5em;
                  z-index: 9;
                  background-color: @color-nav-bg;

                  > div.section-item {
                     margin-bottom: 0.5em;
                  }
               }

               a {
                  display: block;
                  color: @color-nav;
                  text-transform: uppercase;
                  font-size: 1.3em;

                  &:hover {
                     color: @color-nav-hover;
                  }
               }

               &.item-with-icon {
                  > a {
                     display: flex;
                     height: 23px;
                     background-repeat: no-repeat;
                     background-size: contain;
                     background-position: left;
                     text-align: right;
                     span {
                        align-self: center;
                        margin-left: 2em;
                     }
                  }
               }

               &.item-info {
                  &:focus-within {
                     section {
                        display: flex;
                        width: 300px;
                        left: -0.5em;
                     }
                  }
               }

               &.item-cart {
                  > a {
                     background-image: url("../res/v2/icons/cesta-de-la-compra-white.png");
                  }
               }

               &.item-login {
                  > a {
                     background-image: url("../res/v2/icons/usuario-white.png");
                  }
               }

               &.item-user {
                  > a {
                     font-family: @font-item;
                     text-transform: none;
                     background-image: url("../res/v2/icons/usuario-white.png");
                  }

                  &:focus-within {
                     section {
                        display: flex;
                        width: 200px;
                        top: calc(48px - 16px);
                        right: -1em;
                        text-align: right;
                     }
                  }
               }

               &.item-search {
                  form {
                     display: flex;

                     input[type="text"] {
                        width: 7em;
                        border: none;
                        outline: none;
                        font-family: @font-main;
                        font-size: 1.3em;
                        background-color: @color-input-bg;
                        color: @color-input-text;
                        margin-right: 3px;
                        margin-left: -5px;
                        border-radius: 2px;
                        opacity: 0.5;
                        &:hover, &:focus {
                           opacity: 1;
                        }
                     }

                     input[type="submit"] {
                        width: 23px;
                        height: 23px;
                        border: 0;
                        background-color: @color-nav-bg;
                        background-image: url("../res/v2/icons/lupa-white.png");
                        background-repeat: no-repeat;
                        background-size: contain;
                        &:hover {
                           opacity: 0.7;
                        }
                     }
                  }
               }
            }
         }

         nav.right {
            right: 0;
            justify-content: flex-end;
         }
      }

      div.message {
         position: absolute;
         right: 0;
         bottom: 48px;
         background-color: rgba(0,0,0,0.4);
         padding: 0.5em 1em 0.5em 1em;
         border-top-left-radius: 4px;

         blockquote {
            text-shadow:
               3px 3px 0 #000,
               -2px -2px 0 #000,
               2px -2px 0 #000,
               -2px 2px 0 #000,
               2px 2px 0 #000;
         }
      }
   }
}