@use "typography";
@use "theme_variables_common" as *;
@use "mixins";
@use "bootstrap_utils" as bootstrap;
@forward "theme_variables_common";

.legacy-btn {
    @include mixins.legacy-btn;
}

// Overwrite Boostrap section ************
.btn {
    @include mixins.legacy-btn;
}

.btn.btn-big {
    height: 40px !important;
}

.btn.btn-default {
    color: var(--btn-default-color) !important;
    background-color: var(--btn-default-bg) !important;
    box-shadow: var(--btn-default-shadow);
    font-family: var(--font-family-medium);

    &.svg-icon svg-icon svg .st0 {
        fill: var(--btn-default-color);
        stroke: none;
    }

    &.has-icon {
        position: relative;
        padding-left: 36px !important;

        svg-icon {
            position: absolute;
            left: 6px;

            svg .st0 {
                fill: var(--btn-default-color) !important;
            }
        }
    }

    &:hover:not([disabled]):not(.disabled) {
        background-color: var(--btn-default-hover-bg) !important;
        box-shadow: var(--btn-default-hover-shadow);
    }

    &:active:not([disabled]):not(.disabled),
    &.active:not([disabled]):not(.disabled) {
        color: var(--btn-default-active-color) !important;
        background-color: var(--btn-default-active-bg) !important;
        box-shadow: var(--btn-default-active-shadow) !important;

        &.has-icon svg-icon svg .st0 {
            fill: var(--btn-default-active-color) !important;
        }
    }
}

.btn.btn-default-clear {
    color            : var(--btn-default-color) !important;
    background-color : var(--btn-clear-bg) !important;
    //box-shadow       : var(--btn-default-shadow);
    border: 1px solid var(--btn-default-bg);
    font-family      : var(--font-family-medium);

    &.svg-icon svg-icon svg .st0 {
        fill   : var(--btn-default-color);
        stroke : none;
    }

    &.has-icon {
        position     : relative;
        padding-left : 36px !important;

        svg-icon {
            position : absolute;
            left     : 6px;

            svg .st0 {
                fill : var(--btn-default-color) !important;
            }
        }
    }

    &:hover:not([disabled]):not(.disabled) {
        background-color : var(--btn-default-hover-bg) !important;
        box-shadow       : var(--btn-default-hover-shadow);
    }

    &:active:not([disabled]):not(.disabled),
    &.active:not([disabled]):not(.disabled) {
        color : var(--btn-default-active-color) !important;
        background-color : var(--btn-default-active-bg) !important;
        box-shadow       : var(--btn-default-active-shadow) !important;

        &.has-icon svg-icon svg .st0 {
            fill : var(--btn-default-active-color) !important;
        }
    }
}

.btn.btn-action {
    border-radius: 6px !important;
    background-color: var(--button-action-bg) !important;
    border: 1px solid transparent;
    padding: 6px !important;

    &.active {
        border: 1px solid var(--button-action-border-color);
    }

    svg-icon svg path {
        fill: var(--button-action-icon-fill);
        stroke: none;
    }

    &:hover:not([disabled]):not(.disabled) {
        //background-color: var(--btn-default-hover-bg) !important;
        //box-shadow: var(--btn-default-hover-shadow);
    }

    &:active,
    &.active {
        //color: var(--btn-default-active-color) !important;
        //background-color: var(--btn-default-active-bg) !important;
        //box-shadow: var(--btn-default-active-shadow) !important;

        &.has-icon svg-icon svg .st0 {
            //fill: var(--btn-default-active-color) !important;
        }
    }
}


.btn.btn-dropdown-toggle {
    color: var(--btn-dropdown-toggle-color) !important;
    background-color: var(--btn-dropdown-toggle-bg);
    box-shadow: var(--btn-dropdown-toggle-shadow-color);
    font-family: var(--font-family-medium);

    &:hover:not([disabled]):not(.disabled) {
        background-color: var(--btn-dropdown-toggle-hover-bg);
        box-shadow: var(--btn-dropdown-toggle-hover-shadow);
    }

    &:active:not([disabled]):not(.disabled),
    &.active:not([disabled]):not(.disabled) {
        background-color: var(--btn-dropdown-toggle-active-bg);
        box-shadow: var(--btn-dropdown-toggle-active-shadow) !important;
    }

    svg-icon svg g polyline.st0 {
        stroke: var(--btn-dropdown-toggle-color);
        fill: none;
    }

    &.new-header-lang {
        padding: 0 !important;
        margin-top: 4px !important;
    }
}

.btn.btn-primary {
    color: var(--btn-primary-color) !important;
    background-color: var(--btn-primary-bg) !important;
    box-shadow: var(--btn-primary-shadow);

    &:hover:not([disabled]):not(.disabled) {
        background-color: var(--btn-primary-hover-bg) !important;
        box-shadow: var(--btn-primary-hover-shadow);
    }

    &:focus,
    &.focus {}

    &:active:not([disabled]):not(.disabled),
    &.active:not([disabled]):not(.disabled) {
        color: var(--btn-primary-active-color) !important;
        background-color: var(--btn-primary-active-bg) !important;
        box-shadow: var(--btn-primary-active-shadow) !important;
    }

    &.disabledInProgress {
        opacity: 1;
    }

    &.svg-icon svg-icon svg .st0 {
        fill: var(--btn-primary-color);
        stroke: var(--btn-primary-color);
    }
}

.btn.btn-danger {
    color: var(--btn-danger-color) !important;
    background-color: var(--btn-danger-bg) !important;
    box-shadow: var(--btn-danger-shadow) !important;

    &:hover:not([disabled]):not(.disabled) {
        background-color: var(--btn-danger-hover-bg) !important;
        box-shadow: var(--btn-danger-hover-shadow) !important;
    }

    &:focus,
    &.focus {}

    &:active:not([disabled]):not(.disabled),
    &.active:not([disabled]):not(.disabled) {
        background-color: var(--btn-danger-active-bg) !important;
        box-shadow: var(--btn-danger-active-shadow) !important;
    }
}

.btn.btn-lg {
    padding: 10px 16px;
    font-size: 15px;
    line-height: 1.3333333;
    border-radius: 4px;
}

.btn.btn-menu {
    height: 28px;
    color: var(--btn-clear-color);
    border: 1px solid var(--light10)  !important;
    background-color: var(--btn-clear-bg);
    max-width: 180px;
    display: flex;
    align-content: center;
    justify-content: center;
    border-radius: $border-radius-base  !important;
}

.btn.btn-clear {
    color: var(--btn-clear-color);
    background-color: var(--btn-clear-bg);
    max-width: 215px;
    display: flex;
    align-content: center;
    justify-content: center;
    border-radius: $border-radius-base  !important;

    svg-icon svg .st0 {
        stroke: var(--btn-clear-color);
    }

    input {
        position: absolute;
        opacity: 0;
    }

    .glyphicon-close {
        opacity: 1 !important;
    }

    &:hover:not([disabled]):not(.disabled) {
        color: var(--btn-clear-hover-color);
        background-color: var(--btn-clear-hover-bg);

        svg-icon svg .st0 {
            stroke: var(--btn-clear-hover-color);
        }
    }

    &:active:not([disabled]):not(.disabled),
    &.active:not([disabled]):not(.disabled) {
        color: var(--btn-clear-active-color);
        background-color: var(--btn-clear-active-bg) !important;

        svg-icon svg .st0 {
            stroke: var(--btn-clear-active-color);
        }
    }
}

// (END) Overwrite Boostrap section ******

.btn-back {
    padding-left: 0 !important;

    svg-icon {
        margin: 0 8px;

        svg .st0 {
            stroke: var(--btn-default-color) !important;
        }
    }

    &:hover {
        svg-icon svg .st0 {
            stroke: var(--btn-default-hover-color) !important;
        }
    }

    &:active:not([disabled]):not(.disabled) {
        svg-icon svg .st0 {
            fill: var(--btn-default-active-color) !important;
        }
    }
}

.btn-next {
    svg-icon {
        width: 24px;
        margin-left: 8px;

        svg .st0 {
            stroke: var(--light1);
            fill: var(--light1);
        }
    }
}

.btn-dropdown-toggle {
    background-color: transparent;
}

.btn-tag {
    @include typography.regular13nocolor;
    color: var(--btn-tag-color);
    font-weight: 400;
    white-space: nowrap;
    background-color: var(--btn-tag-bg);
    max-width: none;

    &:hover {
        //color            : $light16;
        //background-color : $light5;
    }

    &:active {
        //color            : $light16;
        //background-color : $light6;
    }

    &-selected {
        @include typography.regular13nocolor;
        @include mixins.badge-selected(var(--btn-tag-selected-bg) !important,
            var(--btn-tag-selected-hover-bg),
            var(--btn-tag-selected-active-bg));
        color: var(--btn-tag-selected-color) !important;
        ;
        padding: 0 40px 0 12px !important;
        position: relative;
        max-width: none;
        cursor: default !important;

        &>span {
            margin: 0;
            padding: 0;
        }

        &:hover {
            //color : $light1;
        }

        .close-button {
            position: absolute;
            right: 0;
            bottom: 0;
            border-radius: 2px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 40px;
            width: 40px;
            cursor: pointer;

            .tag-close-icon {
                margin: 0 !important;
            }
        }

        svg-icon svg g polyline.st0 {
            stroke: var(--btn-tag-selected-color) !important;
            fill: none;
        }
    }
}

.btn.btn-arrow {
    color: var(--btn-arrow-color);
    background-color: var(--btn-arrow-bg);
    position: relative;
    padding-left: 40px !important;
    padding-right: 12px !important;
    max-width: none;

    &:hover {
        color: var(--btn-arrow-hover-color);
        background-color: var(--btn-arrow-hover-bg);
    }

    &.has-icon {
        padding-left: 20px;
    }

    &>span {
        margin: 0;
        padding: 0 1px; // flex messes up caption width
    }

    &.selected {
        color: var(--btn-arrow-selected-color);
        background-color: var(--btn-arrow-selected-bg);
    }

    .arrow-flip svg-icon svg g polyline.st0 {
        stroke: var(--btn-arrow-selected-color);
        fill: none;
    }
}

.btn-text {
    text-decoration: none;

    svg-icon svg {
        width: 20px;
        height: 20px;

        .st0 {
            stroke: var(--btn-text-color);
        }
    }

    &.has-icon {
        padding-left: 25px !important;
        position: relative;

        svg {
            path {
                fill: var(--btn-text-color);
            }
        }
    }

    span {
        @include typography.regular13nocolor;
        color: var(--btn-text-color);

        &.close {
            left: 4px;
            width: 16px;
            height: 16px;

            &:before,
            &:after {
                background-color: var(--btn-text-color);
            }
        }
    }

    &:hover {
        text-decoration: none;

        span {
            color: var(--btn-text-hover-color) !important;
            text-decoration: none;

            &.close {

                &:before,
                &:after {
                    background-color: var(--btn-text-hover-color);
                }
            }
        }

        svg-icon svg .st0 {
            stroke: var(--btn-text-hover-color);
        }
    }

    &:active:not([disabled]):not(.disabled) {
        span {
            color: var(--btn-text-active-color) !important;

            &.close {

                &:before,
                &:after {
                    color: var(--btn-text-active-color) !important;
                }
            }
        }

        svg-icon svg .st0 {
            stroke: var(--btn-text-active-color);
        }
    }
}

.btn.btn-brand-outline {
    color: var(--btn-primary-bg);
    background-color: transparent;
    outline: 1px solid var(--btn-primary-bg);

    &:not(:disabled) {
        &:hover {
            outline-color: var(--btn-primary-hover-bg);
            color: var(--btn-primary-hover-color);
            background-color: var(--btn-primary-hover-bg);
            box-shadow: var(--btn-primary-hover-shadow);
        }

        &:active {
            outline-color: var(--btn-primary-active-bg);
            color: var(--btn-primary-active-color);
            background-color: var(--btn-primary-active-bg);
            box-shadow: var(--btn-primary-active-shadow);
        }

        &:focus-visible {
            outline: 2px solid var(--btn-primary-focus-outline-rgb);
            outline-offset: 2px;
            box-shadow: var(--btn-primary-focus-shadow);
        }
    }
}
