/* ---------------------------------------------------------------------------*/
/* MOBILE FIRST -  layout/header/_header-menu--main-nav.scss                  */
/* ---------------------------------------------------------------------------*/
@charset "UTF-8";

//////////////////////////////////////////////////////////////////////////////
// [ # MIXIN ]
@mixin cf {
  &:after,
  &:before {
    content: '';
    display: table;
  }
  &:after {
    clear: both;
  }
}
////////////////////////////////////////////////////////// BREAKPOINT SMALL DOWN
@include media-breakpoint-down(sm) {

  ////////////////////////////////////////////////////////////////////////////
  // [ MAIN NAVIGATION - SEARCH ]
  .block-search {
    overflow     : hidden;
    #search-block-form {
      position: relative;
    }
    width        : 100%;
    height       : 2.35rem;
    border-bottom: 1px solid $gray-600;
    border-top   : 1px solid $gray-600;
    position     : relative;
    .form-actions {
      position: absolute;
      top     : 3px;
      input {
        background-color: transparent;
        border          : 0;
        font-size       : 0;
        padding         : 0;
      }
      &:before {
        content         : '';
        width           : 30px;
        height          : 30px;
        display         : inline-block;
        background-color: $white;
        transition      : $transition-base;
        margin-left     : .25rem;
        mask            : url('../icon/search.svg');
        mask-size       : cover;
        mask-repeat     : no-repeat;
        margin-left     : .75rem;
      }
      &:hover:before {
        background-color: $white;
      }

    }
    .form-search {
      border          : 0;
      height          : 2.35rem;
      width           : 90%;
      background-color: transparent;
      color           : $white;
      padding-left    : 2.5rem;
      padding-top     : 0;
      position        : relative;
      padding-bottom  : 0;
      font-size       : 1rem;
      display         : inline-block;
      border-radius   : 0;
      margin-left     : .75rem;
      &:focus {
        background-color: transparent;
        box-shadow      : none;

      }
    }
  }
}
/////////////////////////////////////////////////////////// BREAKPOINT MEDIUM UP
@include media-breakpoint-up(md) {
  //////////////////////////////////////////////////////////////////////////////
  // [ MAIN NAVIGATION - SEARCH ]
  #menu-main {
    .block-search {
      width        : auto;
      border-bottom: none;
      border-top   : none;
    }
    #search-block-form {
      display : inline-flex;
      position: unset;
      .custom-search {
        min-height: auto;
      }
      .custom-control {
        position: inherit;
      }
    }
    @include cf;
    .form-actions {
      width  : 30px;
      display: inline-block;
      height : 30px;
      input {
        background-color: transparent;
        border          : 0;
        font-size       : 0;
        padding         : 0;
      }
      &:before {
        content         : '';
        width           : 30px;
        height          : 30px;
        display         : inline-block;
        background-color: $white;
        transition      : $transition-base;
        margin-left     : .25rem;
      }
      &:hover:before {
        background-color: $primary;
      }
    }
    .form-actions {
      &:before {
        mask       : url('../icon/search.svg');
        mask-size  : cover;
        mask-repeat: no-repeat;
      }
    }
    &.show-search .form-actions {
      &:before {
        mask       : url('../icon/x.svg');
        mask-size  : cover;
        mask-repeat: no-repeat;
      }
    }

    // [ SEARCH-EFFECT ]
    .nav {
      li {
        opacity   : 1;
        transition: all .3s .3s;
        z-index   : 1;
      }
    }
    .form-search {
      font-size       : 1.1rem;
      position        : absolute;
      left            : 0;
      height          : 100%;
      opacity         : 0;
      transition      : all .3s;
      border          : 0;
      padding-left    : 0;
      width           : 100%;
      background-color: transparent;
      color           : $white;
      border          : 0;
      box-shadow      : 0;
      margin-top      : -1.5rem;
      &.form-control:focus {
        box-shadow      : none;
        background-color: transparent;
        color           : $white;
      }
    }

    &.show-search .form-search {
      width     : calc(100% - 5em);
      opacity   : 1;
      transition: all .3s .3s;
    }
    &.show-search .nav li {
      opacity   : 0;
      transition: all .3s;
      z-index   : 0;
      &:nth-child(even) {
        transform: translateY(-100%);
      }
      &:nth-child(odd) {
        transform: translateY(100%);
      }
    }
  }

}
