// (C) 2007-2021 GoodData Corporation
@import "../../core/styles/layout";
@import "../../core/styles/styles";

$base_path: $gdc-goodstrap-basepath + "./core/styles/";

$gd-header-height: 44px;
$gd-header-animation-easing: cubic-bezier(0.23, 1, 0.32, 1);
$gd-header-project-width: 230px;

.gd-header {
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    height: $gd-header-height;
    padding: 0 0 0 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    color: $gd-color-text-light;
    background: #000;

    &.is-not-loaded {
        // overwrite
        // stylelint-disable-next-line declaration-no-important
        visibility: hidden !important;
    }

    > :empty {
        display: none;
    }
}

.gd-header-logo {
    flex: 0 0 auto;
    height: $gd-header-height;
    line-height: 40px;
    cursor: pointer;
    min-width: 30px;
    max-width: 180px;
    margin-right: 18px;

    @include transition(all, 0.2s);
    // Disable pointer cursor on home route
    &.active {
        cursor: default;
    }

    &:not(.active) {
        @include active-states {
            opacity: 0.6;
        }
    }

    img {
        width: auto;
        height: auto;
        border: none;
        vertical-align: middle;
        max-width: 100%;
        max-height: 29px;
    }
}

.gd-header-menu-wrapper,
.gd-header-menu,
.gd-header-menu-section {
    display: flex;
}

.gd-header-menu-section {
    flex: 0 0 auto;
    margin: 0;
    padding: 0 11px;

    + .gd-header-menu-section {
        border-left: 1px solid transparent;
    }
}

.gd-header-menu,
.gd-data-header-menu-section {
    flex: 1 0 auto;

    &,
    li {
        margin: 0;
        padding: 0;
    }

    li {
        display: block;
        list-style: none;
    }
}

.gd-header-menu-vertical-wrapper {
    position: fixed;
    z-index: 5000;
    top: 0;
    right: 0;
    bottom: 0;
    width: 240px;
    white-space: nowrap;
    color: $gd-color-state-blank;
    background-color: #2c343f;

    * {
        box-sizing: border-box;
    }
}

.gd-header-enter.gd-header-enter-active,
.gd-header-leave {
    right: 0;
    transition: right 0.3s $gd-header-animation-easing;
}

.gd-header-enter,
.gd-header-leave-active {
    right: -240px;
    transition: right 0.3s $gd-header-animation-easing;
}

.gd-header-menu-vertical-bottom-item {
    position: relative;
    display: block;
    overflow: hidden;
    height: 43px;
    padding: 0 15px;
    line-height: 43px;
    white-space: nowrap;
    color: $gd-color-state-blank;
    font-size: 16px;
    text-overflow: ellipsis;
}

.gd-header-menu-vertical {
    li a {
        position: relative;
        display: block;
        height: 43px;
        padding: 0 15px;
        line-height: 43px;
        color: $gd-color-state-blank;
        cursor: pointer;
        font-size: 16px;

        &::before,
        &::after {
            content: "";
            position: absolute;
            display: block;
        }

        &::before {
            top: 0;
            bottom: 0;
            left: 0;
            width: 4px;
        }

        &::after {
            right: 15px;
            bottom: -1px;
            left: 15px;
            height: 1px;
            border-bottom: 1px solid transparentize($gd-color-state-blank, 0.8);
        }

        &:hover,
        &.active {
            border: none;
            color: $gd-color-text-light;
            background-color: #131c28;

            &::after {
                display: none;
            }
        }

        &.active {
            font-weight: bold;

            &::before {
                background-color: $gd-color-highlight;
            }
        }
    }

    .gd-header-menu-section {
        padding: 0;
        border: none;
        flex-direction: column;
    }
}

.gd-header-menu-vertical-header {
    overflow: hidden;
    height: $gd-header-height;
    line-height: $gd-header-height;
    margin-left: 15px;
    margin-right: $gd-header-height;
    font-size: 16px;
    text-overflow: ellipsis;
    text-align: right;
    text-transform: uppercase;
}

.gd-header-menu-vertical-content {
    position: absolute;
    top: $gd-header-height;
    right: 0;
    bottom: 63px;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border-top: 1px solid transparentize($gd-color-state-blank, 0.8);

    .gd-header-menu {
        display: block;
    }
}

.gd-header-menu-vertical-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0 0 15px;
    border-top: 1px solid transparentize($gd-color-state-blank, 0.8);
}

.gd-header-menu-item {
    box-sizing: content-box;
    display: inline-block;
    height: 41px;
    padding: 0 9px;
    line-height: 43px;
    cursor: pointer;
    font-size: 14px;

    @include transition(color, 0.2s);

    @include active-states-and-self {
        color: inherit;
        opacity: 1;
        text-decoration: none;
    }

    &:hover,
    &:focus,
    &:active,
    &.active {
        border-bottom-width: 3px;
        border-bottom-style: solid;
    }

    &,
    &:active {
        opacity: 0.8;
    }

    &.active {
        opacity: 1;
        border-color: $gd-color-highlight;
        font-weight: 700;
    }
}

.gd-header-project-wrapper {
    display: flex;
    flex: 1 1 $gd-header-project-width;
    min-width: 160px;
    max-width: $gd-header-project-width;

    &,
    div:first-child {
        overflow: hidden;
    }

    > div:first-child {
        flex: inherit;
        max-width: inherit;
    }
}

.gd-header-project {
    position: relative;
    box-sizing: content-box;
    flex: 0 1 230px;
    padding: 0 34px 0 10px;
    border: 1px solid transparent;
    line-height: $gd-header-height;
    border-width: 0 1px;
    font-weight: 700;
    font-size: 18px;

    @include text-overflow();

    &.is-collapsed,
    &.is-expanded {
        cursor: pointer;

        &:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        &::after {
            position: absolute;
            top: 0;
            right: 11px;
            width: 12px;
            opacity: 0.5;
            font-family: "Indigo", sans-serif;
            text-align: center;
        }
    }

    &.is-collapsed::after {
        content: "\E612";
    }

    &.is-expanded::after {
        content: "\E613";
    }
}

.gd-header-stretch {
    flex: 1 1 auto;
}

.gd-header-shrink {
    flex: 0 1 auto;

    ~ .gd-header-project-wrapper {
        flex: 1 1 auto;
        max-width: none;
    }
}

.gd-header-account,
.gd-header-help {
    height: 100%;
    margin: 0;
    padding: 0 13px;
    line-height: 42px;
    opacity: 0.8;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 400;

    @include text-overflow;

    &:hover,
    &.is-open {
        opacity: 1;
    }

    &.is-open {
        background-color: rgba(255, 255, 255, 0.3);
    }
}

.gd-header-account {
    &:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    padding-right: 34px;
    &::after {
        content: "\e612";
        position: absolute;
        top: 0;
        right: 11px;
        width: 12px;
        opacity: 0.5;
        text-align: center;
        font-family: "Indigo", sans-serif;
        font-size: 18px;
        font-weight: 700;
    }

    &.is-open::after {
        content: "\e613";
    }
}

.gd-header-account-icon {
    vertical-align: middle;
    opacity: 0.8;
    margin-right: 6px;
}

.icon-header-help,
.icon-header-help-back {
    &::before {
        vertical-align: bottom;
        opacity: 0.8;
        padding-right: 6px;
    }
}

.icon-header-help {
    &::before {
        content: "\e60b";
    }
}

.icon-header-help-back {
    font-size: 16px;
    text-transform: uppercase;

    &::before {
        content: "\E610";
    }
}

.gd-header-username {
    &::before {
        margin-right: 8px;
        font-size: 14px;
    }
}

.hamburger-wrapper {
    flex: 0 0 9px;
    text-align: right;
}

.hamburger-icon {
    position: relative;
    display: inline-block;
    width: $gd-header-height;
    height: $gd-header-height;
    margin: 0;
    cursor: pointer;

    &::before,
    &::after,
    i {
        content: "";
        position: absolute;
        right: 11px;
        left: 11px;
        display: block;
        height: 0;
        transition: 0.4s;
        border-bottom: 1px solid $gd-color-text-light;
    }

    &::before {
        top: 15px;
    }

    &::after {
        top: 27px;
    }

    i {
        top: 21px;
    }

    &.is-open {
        position: fixed;
        z-index: 5005;
        top: 0;
        right: 0;
        margin: 0;

        &::before,
        &::after {
            top: 21px;
            right: 9px;
            left: 9px;
        }

        &::before {
            transform: rotate(45deg);
        }

        &::after {
            transform: rotate(-45deg);
        }

        i {
            right: 50%;
            left: 50%;
            opacity: 0;
        }
    }
}

.logout-button {
    box-sizing: border-box;
    display: block;
    width: calc(100% - 30px);
    height: 33px;
    margin: 0 15px;
    border: 1px solid transparentize($gd-color-disabled, 0.6);
    box-shadow: 0 1px 1px 0 transparentize(#14395d, 0.95);
    color: $gd-color-text-light;
    cursor: pointer;
    transition: 0.2s;
    border-radius: 3px;
    font-size: 14px;
    text-align: center;
    background-color: $gd-color-state-blank;

    &::before {
        content: "";
        position: relative;
        top: 2px;
        display: inline-block;
        width: 16px;
        height: 16px;
        margin: -2px 5px 0 -4px;
        background-image: url($base_path + "./icons/logout.svg");
    }

    &:hover {
        border-color: transparentize($gd-color-state-blank, 0.6);
        background-color: $gd-color-link;
    }
}

.gd-list-item.gd-project-list-item {
    justify-content: flex-start;
    font-size: 14px;

    .project-title {
        flex: 0 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .demo-sticker {
        box-sizing: border-box;
        flex: 0 auto;
        height: 16px;
        padding: 2px 3px 1px;
        line-height: 13px;
        color: $gd-color-text-light;
        background: #5ebc5b;
        margin-left: 7px;
        border-radius: 3px;
        font-size: 10px;
        font-weight: normal;
        text-transform: uppercase;
    }

    &.gd-is-selected {
        font-weight: bold;
    }
}

.gd-header-account-dropdown {
    overflow: hidden;

    .gd-list {
        min-width: 210px;
    }
}

.gd-header-help-dropdown {
    overflow: hidden;

    .gd-list {
        min-width: 150px;
    }
}

.gd-header-project-picker-footer {
    padding: 15px;
    border-top: 1px solid $gd-border-color;
}

.gd-data-header-menu-section {
    display: flex;

    .icon-sources {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        border-right: 0;
    }

    .icon-model {
        border-radius: 0;
    }

    .icon-cloud-upload {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        border-left: 0;

        &::before {
            top: 11px;
        }
    }

    button.is-active[class*="gd-button-"]::before,
    button[class*="gd-button-"]::before {
        width: 19px;
        height: 16px;
        font-size: 16px;
    }

    .gd-button-primary[class*="icon-"] {
        box-shadow: none;
        padding-left: 35px;
    }

    button.is-active {
        box-shadow: inset 0 1px 0 0 $button-normal-active-shadow;
        color: $gd-color-text;
        border-color: $button-normal-active-border-color;

        @include gradient-linear($button-normal-active-gradient-top, $button-normal-active-gradient-bottom);

        &::before,
        &::after {
            top: calc(50% + 1px);
            color: $gd-color-highlight;
        }

        .gd-button-text {
            font-weight: bold;
        }

        .gd-button-icon {
            margin-top: 2px;
        }
    }

    .gd-button-text {
        font-weight: normal;
        font-size: 12px;
        line-height: 14px;
    }
}