/**
 * $JA#COPYRIGHT$
 */

// VARIABLES & MIXINS
// ------------------
@import "../vars.less"; // Modify this for custom colors, font-sizes, etc

.com_mijoshop {
 //Fix bug when load 

  // Toggle Button
  // -------------------
  .t3-wrapper {
    .off-canvas-toggle {
      border-radius: 0;
      border: 0;
      padding: 0;
      width: 36px;
      height: 36px;
      line-height: 36px;
      top: 20px;
      left: 15px;
      position: absolute;
      background: none;
      border: 1px solid rgba(255,255,255,.6);
      color: @white;

      &:hover,
      &:focus, 
      &:active {
        border-color: rgba(255,255,255,1);
        background: none;
        outline: none;
        color: @white;
      }

      @media (max-width: @screen-sm) {
        top: 25px;
        left: 20px;
      }
    }

    // Fixed menu
    // -------------------
    .navbar-default {
      background-color: transparent;
      border-color: transparent;
      padding: 0;
      margin-top: -@t3-global-margin - 1px;
      margin-bottom: -@t3-global-margin - 1px;

      .navbar-brand {
        color: @navbar-default-brand-color;
        &:hover,
        &:focus {
          color: @navbar-default-brand-hover-color;
          background-color: @navbar-default-brand-hover-bg;
        }
      }

      .navbar-text {
        color: @white;
      }

      .navbar-nav {
        > li > a {
          color: @white;
          font-size: @t3-font-size-big;
          text-transform: uppercase;
          font-weight: 700;
          padding: (@t3-global-padding * 1.5) @t3-global-padding;
          border-left: 1px solid darken(@brand-primary, 5%);
          border-right:  none;

          &:hover,
          &:focus {
            color: @white;
            background-color: darken(@brand-primary, 5%);
          }

        }
        > .active > a {
          color: @white;
          background-color: darken(@brand-primary, 5%);

          &,
          &:hover,
          &:focus {
            color: @white;
            background-color: darken(@brand-primary, 5%);
          }
        }
        > .disabled > a {
          &,
          &:hover,
          &:focus {
            color: @navbar-default-link-disabled-color;
            background-color: @navbar-default-link-disabled-bg;
          }
        }
      }

      .navbar-toggle {
        border-color: @navbar-default-toggle-border-color;
        margin: -@t3-global-margin @t3-global-margin 0 0;
        color: @white;

        &:hover,
        &:focus {
          background-color: @white;
          color: @brand-primary;
          border-color: transparent;
        }
        .icon-bar {
          background-color: @navbar-default-toggle-icon-bar-bg;
        }
      }

      .navbar-collapse,
      .navbar-form {
        border-color: @navbar-default-border;
      }

      // Dropdown menu items and carets
      .navbar-nav {
        // Caret should match text color on hover
        > .dropdown > a:hover .caret,
        > .dropdown > a:focus .caret {
          border-top-color: @navbar-default-link-hover-color;
          border-bottom-color: @navbar-default-link-hover-color;
        }

        // Remove background color from open dropdown
        > .open > a {
          &,
          &:hover,
          &:focus {
            background-color: darken(@brand-primary, 5%);
            color: @white;
            .caret {
              border-top-color: @navbar-default-link-active-color;
              border-bottom-color: @navbar-default-link-active-color;
            }
          }
        }

        > .dropdown > a .caret {
          border-top-color: @navbar-default-link-color;
          border-bottom-color: @navbar-default-link-color;
          display: none;
        }


        @media (max-width: @screen-sm-max) {
          // Dropdowns get custom display when collapsed
          .open .dropdown-menu {
            > li > a {
              color: @white;
              &:hover,
              &:focus {
                color: @white;
                background-color: darken(@brand-primary, 5%);
              }
            }
            > .active > a {
              &,
              &:hover,
              &:focus {
                color: @white;
                background-color: darken(@brand-primary, 5%);
              }
            }
            > .disabled > a {
              &,
              &:hover,
              &:focus {
                color: @navbar-default-link-disabled-color;
                background-color: @navbar-default-link-disabled-bg;
              }
            }
          }
        }
      }

      // Links in navbars
      .navbar-link {
        color: @navbar-default-link-color;
        &:hover {
          color: @navbar-default-link-hover-color;
        }
      }

    }

    // breadcrumb
    //-----------------
    .breadcrumb {
      margin-bottom: 0;
      padding-left: 0;
      padding-right: 0;
      border-radius: 0;
      background: none;

      > li:first-child,
      > li:nth-child(2) {
        &:before {
          content: "" !important;
        }
      }

      > li a {
        color: @breadcrumb-color;

        &:hover,
        &:focus,
        &:active {
          text-decoration: none;
          color: @breadcrumb-active-color;
        }
      }

      // Active
      > .active {
        color: @breadcrumb-active-color;
      }

      // T3 Note: Hide default Joomla! arrow in breadcrum
      .divider {
        display: none;
      }
    }
  }

  .product-filter .display button {
    color: @gray-light;

    &.active {
      color: @black;
    }
  }
}
