@import '../../assets/scss/constants/colors';
@import '../../assets/scss/constants/zIndexes';
@import '../../assets/scss/base/mixins';

.drawer {
  display: flex;

  &-menu {
    z-index: $ziDrawerMenu;
    position: absolute;
    width: 55px !important;
    height: 100vh;
    background: $deepteal;
    transition-duration: 150ms;
    transition-timing-function: ease-in-out;
    overflow-x: hidden;
    overflow-y: auto;
    color: $white;
    user-select: none;
    overflow: hidden;

    &-item {
      display: flex;
      align-items: center;
      cursor: pointer;
      justify-content: center;

      &-text {
        font-weight: bold;
        font-size: 13px;
      }

      &-icon {
        // width: 25px;
        padding: 10px;
        font-size: 16px;
        // margin-right: 12px;
      }
    }

    &-item:hover {
      background-color: #edece6;
      color: $deepteal;
    }
  }

  .context-menu-wrapper {
    z-index: $ziDrawerContextMenuWrapper;

    .action-menu {
      border: 0.5px solid $greenHeavy;
      font-size: 12px;
      width: 105px;
      font-weight: 400px;
      padding: 5px;
      background-color: $white;
      box-shadow: 0.5px 0.5px 3px $grey;
      border-radius: 3px;

      &:hover {
        background-color: $lilyWhite;
        cursor: pointer;
      }

      &-items {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      &-item {
        cursor: pointer;
        padding: 2px;
      }
    }
  }

  &-menu-hover:hover {
    width: 220px;
  }

  &-menu:hover .build-version {
    display: block;
  }

  &-menu:hover &-menu-item-text {
    opacity: 1;
  }

  &-submenu {
    width: 165px;
    margin-left: 55px;
    height: calc(100vh - 40px);
    background-color: #edece6;
    color: $black;
    z-index: 4;
    position: absolute;

    .sub-menu-items-ul {
      list-style: none;
      padding: 0;
    }

    &-title {
      padding: 20px;
      font-weight: bold;
      font-size: 13px;
      color: $deepteal;
    }

    &-item {
      padding: 10px;
      padding-left: 20px;
      font-size: 12px;
      cursor: pointer;
      display: block;
      text-decoration: none;
      color: $black;
    }

    &-item-head {
      padding: 10px;
      padding-left: 20px;
      font-size: 12px;
      cursor: pointer;
      display: block;
      text-decoration: none;
      color: $black;

      .sub-menu-items-ul {
        margin: 0px;

        .sub-menu-items-ul-li {
          padding: 10px;

          .drawer-submenu-list-item-link {
            text-decoration: none;
            cursor: pointer;
            color: black;
          }
        }
      }
    }

    &-item:hover {
      font-weight: bold;
    }
  }

  .submenu-active {
    font-weight: bold;
  }

  .menu-active {
    background-color: #edece6;
    color: black;
  }

  .collapse-drawer {
    width: 55px !important;
  }

  .animate-submenu-exit {
    opacity: 1;
    transform: translateX(0px);
  }

  .animate-submenu-exit-active {
    opacity: 0;
    transition-duration: 200ms;
    transform: translateX(-200px);
  }
}

.menu-selected {
  background-color: #edece6;
  color: #A84D97 !important;

  svg {
    color: #a84d97 !important;
  }
}

.menu-active {
  background-color: #edece6;
  color: black;

  // Dashboard SVG
  .dashboard-svg-icon svg {
    color: #000 !important;

    path,
    circle,
    rect {
      fill: #000 !important;
    }
  }

  // Classification SVG
  .classification-svg-icon svg {
    color: #000 !important;

    path,
    circle,
    rect {
      stroke: #000 !important;
    }
  }
  .productmaintenance-svg-icon svg {
    color: #000 !important;

    path,
    circle,
    rect {
      stroke: #000 !important;
    }
  }

  // Attribute management SVG
  .attribute-svg-icon svg {
    color: #000 !important;

    path,
    circle,
    rect {
      fill: #000 !important;
    }
  }

  // Rates management SVG
  .rates-svg-icon svg {
    color: #000 !important;

    path,
    circle,
    rect {
      fill: #000 !important;
    }
  }

  // Template management SVG
  .template-svg-icon svg {
    color: #000 !important;

    path,
    circle,
    rect {
      fill: #000 !important;
    }
  }

  // User Access SVG
  .user-svg-icon svg {
    color: #000 !important;

    path,
    circle,
    rect {
      fill: #000 !important;
      stroke: #000 !important;
    }
  }

  // Admin SVG
  .admin-svg-icon svg {
    color: #000 !important;

    path,
    circle,
    rect {
      fill: #000 !important;
      stroke: #fff !important;
    }
  }

  // Attribution SVG
  .attribution-svg-icon svg {
    color: #000 !important;

    path,
    circle,
    rect {
      fill: #000 !important;
    }
  }

  .qa-svg-icon svg {
    color: #000 !important;

    path {
      stroke: #000 !important;
      fill: #000 !important;
    }

    path,
    circle,
    rect {
      stroke: #000 !important;
    }
  }

  .map-svg-icon svg {
    color: #000 !important;

    path {
      stroke: #000 !important;
      fill: #000 !important;
    }

    path,
    circle,
    rect {
      stroke: #000 !important;
    }
  }
}

.menu-selected {
  background-color: #edece6;
  color: #A84D97 !important;

  // Dashboard SVG
  .dashboard-svg-icon svg {

    // color: #a84d97 !important;
    path,
    circle,
    rect {
      fill: #a84d97 !important;
    }
  }

  // Classification SVG
  .classification-svg-icon svg {
    color: #a84d97 !important;

    path,
    circle,
    rect {
      stroke: #a84d97 !important;
    }
  }

  .productmaintenance-svg-icon svg {
    color: #a84d97 !important;

    path,
    circle,
    rect {
      stroke: #a84d97 !important;
    }
  }

  .creativeassignment-svg-icon svg {
    color: #a84d97 !important;

    path,
    polygon,
    rect {
      stroke: #a84d97 !important;
    }
  }
  // Attribute management SVG
  .attribute-svg-icon svg {
    color: #a84d97 !important;

    path,
    circle,
    rect {
      fill: #a84d97 !important;
    }
  }

  // Rates management SVG
  .rates-svg-icon svg {
    color: #a84d97 !important;

    path,
    circle,
    rect {
      fill: #a84d97 !important;
    }
  }

  // Template management SVG
  .template-svg-icon svg {
    color: #a84d97 !important;

    path,
    circle,
    rect {
      fill: #a84d97 !important;
    }
  }

  // User Access SVG
  .user-svg-icon svg {
    color: #a84d97 !important;

    path,
    circle,
    rect {
      fill: #a84d97 !important;
      stroke: #a84d97 !important;
    }
  }

  // Admin SVG
  .admin-svg-icon svg {
    color: #a84d97 !important;

    path,
    circle,
    rect {
      fill: #a84d97 !important;
      stroke: #fff !important;
    }
  }

  // Attribution SVG
  .attribution-svg-icon svg {
    color: #a84d97 !important;

    path,
    circle,
    rect {
      fill: #a84d97 !important;
    }
  }

  .qa-svg-icon svg {
    color: #a84d97 !important;

    path,
    circle,
    rect {
      fill: #a84d97 !important;
    }
  }

  .map-svg-icon svg {
    color: #a84d97 !important;

    path,
    circle,
    rect {
      fill: #a84d97 !important;
    }
  }
}


.drawer-menu-item-icon {
  svg {
    height: 24px;
    width: 24px;
  }
}

// @media ($mediumScreenMedia) {
//   .drawer-submenu {
//     width: 165px;
//   }
//   .drawer-menu-item {
//     width: 220px;
//   }
//   .drawer-menu:hover {
//     width: 220px;
//   }
//   .drawer-menu:hover .build-version {
//     display: block;
//   }
// }
// @media ($largeScreenMedia) {
//   .drawer-submenu {
//     width: 205px;
//   }
//   .drawer-menu:hover {
//     width: 260px;
//   }
//   .drawer-menu-item {
//     width: 260px;
//   }
//   .drawer-menu:hover .build-version {
//     display: block;
//   }
// }