@import 'variables.css';

/******************************
 Journal Menu
*******************************/

.j-menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap; //multiple main menu rows
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  > li {
    position: relative;
    //height: 100%; //prob pe ff/ie
    > a {
      padding: 3px 6px;
      width: 100%;
      height: 100%;
      max-height: 100%;
      display: flex;
      align-items: center;
      border-width: 1px 0 0 0;
      min-width: 30px;
      cursor: pointer;
      transition: color 0.1s ease-out, background-color 0.1s ease-out;
      &:not([href]) {
        cursor: default;
      }
      &::before {
        line-height: 1;
        font-size: 16px;
      }
    }
    &:first-child{
      > a{
        border-width: 0;
      }
    }
    &.icon-only{
      > a{
        min-width: 10px;
      }
    }
  }
  .links-text {
    display: inline-block;
    color: inherit;
    s{
      display: block;
    }
  }
  .mega-menu {
    position: static;
  }
  .j-dropdown .j-menu{
    //background-color: white;
  }
}

.ios{
  .j-menu > li > a{
    cursor: pointer !important;
  }
}

/******************************
 Top Menu
*******************************/

.top-bar .wrapper {
  justify-content: space-between;
}

.top-menu {
  height: 100%;
  > ul {
    position: relative;
    > li {
      height: 100%;
      + li > a{
        border-width: 0 0 0 1px;
      }
    }
  }
  .dropdown {
    > a{
      &::after {
        transform: rotate(90deg);
        margin-top: 2px;
      }
    }
  }
}

/******************************
 Dropdown
*******************************/

.dropdown-menu {
  font-size: inherit;
}

.j-dropdown {
  margin: 0;
  padding: 0;
  box-shadow: none;
  border-width: 0;
  border-radius: 0;
  min-width: 100%;
  background-color: transparent;
  transform-origin: 50% 0;
  transform: translate3d(0, -10px, 0);
  opacity: 0;
  display: none;
  > ul > li {
    width: 100%;
  }
  //Triangle
  &::before {
    content: "";
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: white;
    pointer-events: none;
    margin-top: -10px;
    display: block;
  }
  .open > & {
    display: block;
  }
  .animating > & {
    transform: none;
    opacity: 1;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out, visibility 0.1s ease-out;
  }
  > .j-menu > li{
    &:first-child{
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
      > a {
        border-width: 0;
        border-radius:inherit;
      }
    }
    &:last-child{
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
      > a {
        border-radius:inherit;
      }
    }
  }
}

.multi-level{
  .j-dropdown{
    .j-dropdown{
      top: 0;
      &::before{
        display: none !important;
      }
    }
  }
}
.flyout-menu-item{
  .j-dropdown{
    &::before{
      display: none !important;
    }
  }
}

// Multilevel Indicator
.dropdown {
  > a {
    position: relative;
    .menu-label{
      transform: none;
    }
    .count-badge {
      margin:0 5px;
      //margin-left: 0;
    }
    &::after {
      content: "\f0da";
      font-family: $icons;
      font-size: 11px;
      position: relative;
      padding: 0 3px;
      margin-left: auto;
    }
  }
  .j-menu{
    //background-color: white;
    > li > a{
      &::before{
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

/******************************
 Menu Label
*******************************/

.menu-label {
  position: absolute;
  font-size: 10px;
  top: 0;
  right: 0;
  .is-sticky &{
    margin-top: 0 !important;
  }
}

/******************************
 Flyout Menu
*******************************/
.flyout-menu {
  display: flex;
  flex-direction: column;
  position: relative;
  > ul > li {
    width: 100%;
    > a{
      .menu-label {
        position: relative;
        margin: 0 7px;
        margin-top: 0 !important;
        margin-bottom:0 !important;
      }
    }
    &:first-child{
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
      &.dropdown:hover{
        border-top-right-radius: 0;
      }
      > a{
        border-radius: inherit;
      }
    }
    &:last-child{
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
      &.dropdown:hover{
        border-bottom-right-radius: 0;
      }
      > a{
        border-radius: inherit;
      }
    }
  }
  > .menu-item {
    &.mega-menu {
      position: static;
    }
  }
  .count-badge + .open-menu + .menu-label{
    margin-left: 0;
  }
  .j-dropdown {
    top: 0;
    left: 100%;
    padding-top: 0;
    width: auto;
    transform: translate3d(0, 0, 0);
    transition: all 0s ease-out;
    min-width: auto;
  }
  .mega-menu {
    .j-dropdown {
      width: 800px;
      height: 100%;
      .mega-menu-content{
        min-height: 100%;
      }
    }
  }
  .dropdown {
    > a::after {
      margin-left: auto;
    }
  }
}

.flyout > .j-dropdown::before{
  z-index: 1;
}

/******************************
 Accordion Menu
*******************************/

.open-menu {
  display: none;
}

.accordion-menu {
  .open-menu {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    transition: color 0.1s ease-out, background-color 0.1s ease-out;
    z-index: 2;
    &[aria-expanded="true"] i::before
    {
        content: '\eb86' !important;
        font-family: icomoon !important;
        font-size: 16px;
        left: 5px;
    }
    i::before {
        content: '\eba1' !important;
        font-family: icomoon !important;
        font-size: 16px;
        left: 5px;
    }
  }
  .menu-item {
    box-shadow: none !important;
    height: auto;
    > a {
      position: relative;
      &::after {
        display: none;
      }
      + div {
        border-width: 1px 0 0 0;
      }
    }
    &.flyout > a{
      + .in {
        border-top-width: 0;
      }
    }
  }
  .j-menu {
    height: auto;
    overflow: hidden;
    > li{
      width: 100%;
      > a{
        .links-text{
          white-space: normal;
        }
        &::before{
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      + li{
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
    }
    .j-menu {
      box-shadow: none;
    }
  }
}


.firstlink {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* Ürün sol menü: mevcut sayfaya ait akordeon altındaki link */
#column-left .accordion-menu .j-menu .j-menu li.menu-item-active > a.menu-link-active,
#column-left .accordion-menu .j-menu .j-menu a.menu-link-active {
  color: #c9302c !important;
  font-weight: 700;
}

#column-left .accordion-menu .j-menu .j-menu a.menu-link-active .links-text {
  color: inherit;
  font-weight: inherit;
}