"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Container = void 0;
var styled_components_1 = __importDefault(require("styled-components"));
var GetThemeVar_1 = require("../../support/GetThemeVar");
var css = styled_components_1.default.div;
exports.Container = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n   background: ", ";\n   width: 300px;\n   height: 100%;\n   overflow-y: auto;\n   padding-bottom: 40px;\n\n   .username-container {\n      color: white;\n      background: rgba(255, 255, 255, 0.1);\n      padding: 10px;\n      margin: 10px 0px;\n      display: flex;\n      align-content: center;\n      align-items: center;\n      color: ", ";\n\n      .username-name {\n         font-weight: 500;\n         flex: 1;\n         padding-left: 15px;\n      }\n\n      .role {\n         font-size: 12px;\n         font-weight: 500;\n         opacity: 0.6;\n      }\n\n      svg {\n         font-size: 10px;\n         margin-left: 10px;\n      }\n\n      a {\n         padding-top: 5px;\n         display: block;\n         color: ", ";\n      }\n   }\n\n   .menu-icon {\n      padding-right: 10px;\n      display: none;\n\n      .ds-menu-hamburger {\n         width: 25px;\n         height: 18px;\n         position: relative;\n         margin: 0px;\n         -webkit-transform: rotate(0deg);\n         -moz-transform: rotate(0deg);\n         -o-transform: rotate(0deg);\n         transform: rotate(0deg);\n         -webkit-transition: 0.5s ease-in-out;\n         -moz-transition: 0.5s ease-in-out;\n         -o-transition: 0.5s ease-in-out;\n         transition: 0.5s ease-in-out;\n         cursor: pointer;\n\n         span {\n            display: block;\n            position: absolute;\n            height: 2px;\n            width: 100%;\n            background: ", ";\n            border-radius: 4px;\n            opacity: 1;\n            left: 0;\n            -webkit-transform: rotate(0deg);\n            -moz-transform: rotate(0deg);\n            -o-transform: rotate(0deg);\n            transform: rotate(0deg);\n            -webkit-transition: 0.25s ease-in-out;\n            -moz-transition: 0.25s ease-in-out;\n            -o-transition: 0.25s ease-in-out;\n            transition: 0.25s ease-in-out;\n         }\n\n         /* Icon 4 */\n\n         & span:nth-child(1) {\n            top: 0px;\n            -webkit-transform-origin: left center;\n            -moz-transform-origin: left center;\n            -o-transform-origin: left center;\n            transform-origin: left center;\n         }\n\n         & span:nth-child(2) {\n            top: 8px;\n            -webkit-transform-origin: left center;\n            -moz-transform-origin: left center;\n            -o-transform-origin: left center;\n            transform-origin: left center;\n         }\n\n         & span:nth-child(3) {\n            top: 16px;\n            -webkit-transform-origin: left center;\n            -moz-transform-origin: left center;\n            -o-transform-origin: left center;\n            transform-origin: left center;\n         }\n\n         &.open span:nth-child(1) {\n            -webkit-transform: rotate(45deg);\n            -moz-transform: rotate(45deg);\n            -o-transform: rotate(45deg);\n            transform: rotate(45deg);\n            top: -3px;\n            left: 3px;\n         }\n\n         &.open span:nth-child(2) {\n            width: 0%;\n            opacity: 0;\n         }\n\n         &.open span:nth-child(3) {\n            -webkit-transform: rotate(-45deg);\n            -moz-transform: rotate(-45deg);\n            -o-transform: rotate(-45deg);\n            transform: rotate(-45deg);\n            top: 15px;\n            left: 3px;\n         }\n      }\n\n      @media (max-width: 992px) {\n         display: block;\n      }\n   }\n\n   .logo-container {\n      text-align: center;\n      padding: 10px 16px;\n   }\n\n   .user-container {\n      text-align: center;\n      color: white;\n      padding: 25px 0px;\n\n      .user-image-container {\n         padding-bottom: 15px;\n      }\n\n      .username {\n         font-weight: bold;\n      }\n   }\n\n   .menu-container {\n      padding: 0px 12px;\n\n      .title-category {\n         color: ", ";\n         text-transform: uppercase;\n         font-weight: bold;\n         padding: 10px 0px;\n         font-size: 13px;\n      }\n\n      hr {\n         margin: 20px -12px;\n         height: 0px;\n         background: white;\n         opacity: 0.2;\n      }\n\n      .menu-item {\n         position: relative;\n         justify-content: flex-start;\n         display: flex;\n         color: ", ";\n         font-size: 13px;\n         align-items: center;\n         padding: 10px 16px;\n         text-decoration: none;\n         line-height: 20px;\n         transition: 0.25s all;\n         font-weight: 600;\n         width: 100%;\n         display: flex;\n         border-radius: 6px;\n         vertical-align: middle;\n\n         .icon,\n         svg {\n            height: 24px;\n            width: 24px;\n            margin-right: 16px;\n            opacity: 0.6;\n            vertical-align: middle;\n         }\n\n         .title {\n            opacity: 0.7;\n            flex: 1;\n            transition: 0.25s all;\n         }\n\n         &.active {\n            opacity: 1;\n            transition: 0.25s all;\n            color: ", ";\n\n            .title {\n               opacity: 1;\n            }\n\n            .icon,\n            svg {\n               opacity: 1;\n               transition: 0.25s all;\n            }\n         }\n\n         .caret {\n            .icon,\n            svg {\n               height: 12px;\n               width: 12px;\n               opacity: 0.6;\n               float: right;\n               vertical-align: middle;\n               transform: rotate(-90deg);\n               transition: 0.25s all;\n            }\n         }\n      }\n\n      .menu-category {\n         .menu-subcategory {\n            overflow: hidden;\n            transition: 0.25s all;\n            opacity: 0;\n\n            .item {\n               align-items: center;\n               position: relative;\n               display: flex;\n               color: ", ";\n               font-weight: bold;\n               padding: 10px 16px;\n               justify-content: flex-start;\n               font-size: 13px;\n               line-height: 20px;\n               opacity: 0.7;\n               text-decoration: none;\n               padding-left: 56px;\n               border-radius: 6px;\n\n               &.active {\n                  opacity: 1;\n                  background: rgba(255, 255, 255, 0.1);\n                  color: ", ";\n\n                  .icon,\n                  svg {\n                     opacity: 1;\n                  }\n               }\n            }\n         }\n\n         &.open {\n            .menu-subcategory {\n               transition: 0.25s all;\n               opacity: 1;\n            }\n\n            .menu-item {\n               .title {\n                  opacity: 1;\n                  transition: 0.25s all;\n                  color: ", ";\n               }\n\n               .icon,\n               svg {\n                  opacity: 1;\n                  transition: 0.25s all;\n               }\n            }\n\n            .caret {\n               .icon,\n               svg {\n                  transition: 0.25s all;\n                  transform: rotate(0deg);\n               }\n            }\n         }\n      }\n   }\n\n   @media (max-width: 992px) {\n      width: 100%;\n      height: 55px;\n      transition: 0.25s all;\n      overflow-y: hidden;\n      z-index: 100;\n      position: fixed;\n\n      .menu-icon {\n         flex: 1;\n      }\n\n      .actions-container {\n         flex: 1;\n      }\n\n      .division-menu-top {\n         display: none;\n      }\n\n      .logo-container {\n         text-align: center;\n      }\n\n      .logo-container {\n         padding: 10px 16px;\n         transition: 0.25s all;\n      }\n\n      ", "\n   }\n"], ["\n   background: ", ";\n   width: 300px;\n   height: 100%;\n   overflow-y: auto;\n   padding-bottom: 40px;\n\n   .username-container {\n      color: white;\n      background: rgba(255, 255, 255, 0.1);\n      padding: 10px;\n      margin: 10px 0px;\n      display: flex;\n      align-content: center;\n      align-items: center;\n      color: ", ";\n\n      .username-name {\n         font-weight: 500;\n         flex: 1;\n         padding-left: 15px;\n      }\n\n      .role {\n         font-size: 12px;\n         font-weight: 500;\n         opacity: 0.6;\n      }\n\n      svg {\n         font-size: 10px;\n         margin-left: 10px;\n      }\n\n      a {\n         padding-top: 5px;\n         display: block;\n         color: ", ";\n      }\n   }\n\n   .menu-icon {\n      padding-right: 10px;\n      display: none;\n\n      .ds-menu-hamburger {\n         width: 25px;\n         height: 18px;\n         position: relative;\n         margin: 0px;\n         -webkit-transform: rotate(0deg);\n         -moz-transform: rotate(0deg);\n         -o-transform: rotate(0deg);\n         transform: rotate(0deg);\n         -webkit-transition: 0.5s ease-in-out;\n         -moz-transition: 0.5s ease-in-out;\n         -o-transition: 0.5s ease-in-out;\n         transition: 0.5s ease-in-out;\n         cursor: pointer;\n\n         span {\n            display: block;\n            position: absolute;\n            height: 2px;\n            width: 100%;\n            background: ", ";\n            border-radius: 4px;\n            opacity: 1;\n            left: 0;\n            -webkit-transform: rotate(0deg);\n            -moz-transform: rotate(0deg);\n            -o-transform: rotate(0deg);\n            transform: rotate(0deg);\n            -webkit-transition: 0.25s ease-in-out;\n            -moz-transition: 0.25s ease-in-out;\n            -o-transition: 0.25s ease-in-out;\n            transition: 0.25s ease-in-out;\n         }\n\n         /* Icon 4 */\n\n         & span:nth-child(1) {\n            top: 0px;\n            -webkit-transform-origin: left center;\n            -moz-transform-origin: left center;\n            -o-transform-origin: left center;\n            transform-origin: left center;\n         }\n\n         & span:nth-child(2) {\n            top: 8px;\n            -webkit-transform-origin: left center;\n            -moz-transform-origin: left center;\n            -o-transform-origin: left center;\n            transform-origin: left center;\n         }\n\n         & span:nth-child(3) {\n            top: 16px;\n            -webkit-transform-origin: left center;\n            -moz-transform-origin: left center;\n            -o-transform-origin: left center;\n            transform-origin: left center;\n         }\n\n         &.open span:nth-child(1) {\n            -webkit-transform: rotate(45deg);\n            -moz-transform: rotate(45deg);\n            -o-transform: rotate(45deg);\n            transform: rotate(45deg);\n            top: -3px;\n            left: 3px;\n         }\n\n         &.open span:nth-child(2) {\n            width: 0%;\n            opacity: 0;\n         }\n\n         &.open span:nth-child(3) {\n            -webkit-transform: rotate(-45deg);\n            -moz-transform: rotate(-45deg);\n            -o-transform: rotate(-45deg);\n            transform: rotate(-45deg);\n            top: 15px;\n            left: 3px;\n         }\n      }\n\n      @media (max-width: 992px) {\n         display: block;\n      }\n   }\n\n   .logo-container {\n      text-align: center;\n      padding: 10px 16px;\n   }\n\n   .user-container {\n      text-align: center;\n      color: white;\n      padding: 25px 0px;\n\n      .user-image-container {\n         padding-bottom: 15px;\n      }\n\n      .username {\n         font-weight: bold;\n      }\n   }\n\n   .menu-container {\n      padding: 0px 12px;\n\n      .title-category {\n         color: ", ";\n         text-transform: uppercase;\n         font-weight: bold;\n         padding: 10px 0px;\n         font-size: 13px;\n      }\n\n      hr {\n         margin: 20px -12px;\n         height: 0px;\n         background: white;\n         opacity: 0.2;\n      }\n\n      .menu-item {\n         position: relative;\n         justify-content: flex-start;\n         display: flex;\n         color: ", ";\n         font-size: 13px;\n         align-items: center;\n         padding: 10px 16px;\n         text-decoration: none;\n         line-height: 20px;\n         transition: 0.25s all;\n         font-weight: 600;\n         width: 100%;\n         display: flex;\n         border-radius: 6px;\n         vertical-align: middle;\n\n         .icon,\n         svg {\n            height: 24px;\n            width: 24px;\n            margin-right: 16px;\n            opacity: 0.6;\n            vertical-align: middle;\n         }\n\n         .title {\n            opacity: 0.7;\n            flex: 1;\n            transition: 0.25s all;\n         }\n\n         &.active {\n            opacity: 1;\n            transition: 0.25s all;\n            color: ", ";\n\n            .title {\n               opacity: 1;\n            }\n\n            .icon,\n            svg {\n               opacity: 1;\n               transition: 0.25s all;\n            }\n         }\n\n         .caret {\n            .icon,\n            svg {\n               height: 12px;\n               width: 12px;\n               opacity: 0.6;\n               float: right;\n               vertical-align: middle;\n               transform: rotate(-90deg);\n               transition: 0.25s all;\n            }\n         }\n      }\n\n      .menu-category {\n         .menu-subcategory {\n            overflow: hidden;\n            transition: 0.25s all;\n            opacity: 0;\n\n            .item {\n               align-items: center;\n               position: relative;\n               display: flex;\n               color: ", ";\n               font-weight: bold;\n               padding: 10px 16px;\n               justify-content: flex-start;\n               font-size: 13px;\n               line-height: 20px;\n               opacity: 0.7;\n               text-decoration: none;\n               padding-left: 56px;\n               border-radius: 6px;\n\n               &.active {\n                  opacity: 1;\n                  background: rgba(255, 255, 255, 0.1);\n                  color: ", ";\n\n                  .icon,\n                  svg {\n                     opacity: 1;\n                  }\n               }\n            }\n         }\n\n         &.open {\n            .menu-subcategory {\n               transition: 0.25s all;\n               opacity: 1;\n            }\n\n            .menu-item {\n               .title {\n                  opacity: 1;\n                  transition: 0.25s all;\n                  color: ", ";\n               }\n\n               .icon,\n               svg {\n                  opacity: 1;\n                  transition: 0.25s all;\n               }\n            }\n\n            .caret {\n               .icon,\n               svg {\n                  transition: 0.25s all;\n                  transform: rotate(0deg);\n               }\n            }\n         }\n      }\n   }\n\n   @media (max-width: 992px) {\n      width: 100%;\n      height: 55px;\n      transition: 0.25s all;\n      overflow-y: hidden;\n      z-index: 100;\n      position: fixed;\n\n      .menu-icon {\n         flex: 1;\n      }\n\n      .actions-container {\n         flex: 1;\n      }\n\n      .division-menu-top {\n         display: none;\n      }\n\n      .logo-container {\n         text-align: center;\n      }\n\n      .logo-container {\n         padding: 10px 16px;\n         transition: 0.25s all;\n      }\n\n      ", "\n   }\n"])), function (props) { var _a, _b; return ((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.backgroundColor) || '#000'; }, function (props) { var _a, _b; return ((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.textColorMenu) || 'white'; }, function (props) { var _a, _b; return ((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.textColorActiveMenu) || (0, GetThemeVar_1.GetThemeVar)(props.theme, 'primary'); }, function (props) { var _a, _b; return ((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.textColorMenu) || 'white'; }, function (props) { var _a, _b; return ((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.textColorActiveMenu) || (0, GetThemeVar_1.GetThemeVar)(props.theme, 'primary'); }, function (props) { var _a, _b; return ((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.textColorMenu) || 'white'; }, function (props) { var _a, _b; return ((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.textColorActiveMenu) || (0, GetThemeVar_1.GetThemeVar)(props.theme, 'primary'); }, function (props) { var _a, _b; return ((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.textColorMenu) || 'white'; }, function (props) { var _a, _b; return ((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.textColorActiveMenu) || (0, GetThemeVar_1.GetThemeVar)(props.theme, 'primary'); }, function (props) { var _a, _b; return ((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.textColorActiveMenu) || (0, GetThemeVar_1.GetThemeVar)(props.theme, 'primary'); }, function (p) {
    return p.open &&
        "\n         height: 100%;\n         overflow-y: auto;\n      ";
});
var templateObject_1;
//# sourceMappingURL=HeaderVertical.style.js.map