@import './variables';
@import '~@gravity-ui/uikit/styles/mixins';

@mixin overflow-ellipsis($type: ellipsis) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: $type;
}

@mixin button-reset() {
    margin: 0;
    padding: 0;

    font-size: inherit;
    font-weight: 400;

    color: inherit;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
}

@mixin max-height($height) {
    max-height: $height;
    overflow-y: auto;
}

@mixin max-text-width($width: 100%) {
    @include overflow-ellipsis();

    max-width: $width;
}

@mixin link-reset() {
    &,
    &:hover,
    &:active,
    &:visited,
    &:focus {
        text-decoration: none;
        outline: none;
        color: inherit;
    }
}

@mixin hide-input-number-spin() {
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        // display: none; <- Crashes Chrome on hover
        -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
        // Apparently some margin are still there even though it's hidden
        margin: 0;
    }

    input[type='number'] {
        // Firefox
        -moz-appearance: textfield; // stylelint-disable-line property-no-vendor-prefix
    }
}

@mixin attention-block() {
    width: 100%;
    border: 1px solid var(--g-color-text-danger);
    border-radius: 8px;
    padding: 12px 16px;
    flex-shrink: 0;
}

@mixin info-block() {
    @include attention-block();
    border-color: var(--g-color-line-generic-solid);
}

@mixin revision-panel-fix() {
    & .action-panel ~ .active {
        height: #{$revisionPanelHeight};

        & ~ .columns {
            height: calc(100vh - 70px - #{$actionPanelHeight} - #{$revisionPanelHeight});

            &_aside-true {
                height: calc(100vh - #{$actionPanelHeight} - #{$revisionPanelHeight});
            }
        }
    }
}

@mixin dl-adaptive-tabs() {
    box-shadow: none;

    &__tab {
        border-bottom: unset;
        padding: 0;

        &_active {
            border-color: unset;
            color: unset;
        }
    }
}

@mixin dl-select-popup($mh: 40vh, $mw: 400px) {
    max-height: $mh;
    max-width: $mw;
}

@mixin dl-select-disabled-option() {
    color: var(--g-color-text-secondary);
    pointer-events: none;
}

@mixin hidden-scrollbar() {
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }
}

@mixin scrollbar-on-hover($width) {
    scrollbar-width: none;

    border-color: rgba(0, 0, 0, 0);
    transition: border-color 0.3s ease-in-out;

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    &::-webkit-scrollbar {
        width: $width;
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background: transparent;
        border-right-style: inset;
        border-right-width: calc(100vw + 100vh);
        border-color: inherit;
    }

    &:hover {
        border-color: var(--g-color-scroll-handle);
    }
}

@mixin dialog-max-height-scroll($height: 90vh) {
    overflow-y: auto;
    // $height - [dialog header height] - [dialog footer height] - [body padding]
    max-height: calc($height - 54px - 92px - 20px);
}

@mixin yfm-text-style {
    @include text-body-1();
}

@keyframes pulseAnimation {
    0% {
        opacity: 0.65;
    }
    50% {
        opacity: 0.35;
    }
    100% {
        opacity: 0.65;
    }
}

@mixin loading-pulsate-animation-style {
    animation: pulseAnimation 1.5s ease-in-out infinite;
}

@mixin installation-info-font {
    font-size: 10px;
    line-height: 15px;
    font-weight: bold;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

@mixin palette-item-border($borderColor, $margin, $borderWidth: 2px, $borderRadius: 9px) {
    content: '';
    position: absolute;
    top: -#{$margin}px;
    left: -#{$margin}px;
    width: calc(100% + #{$margin}px * 2);
    height: calc(100% + #{$margin}px * 2);
    border: $borderWidth solid $borderColor;
    border-radius: $borderRadius;
}
