@import '@angular/cdk/overlay-prebuilt.css';

.cdk-overlay-container {
    z-index: 9999;
}

.ym-active-shadow-button-inset:active:not(:disabled) {
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15) inset; // no var
}

// -----------------
// For popover mobile
@include ym-media-breakpoint-down(sm) {
    .cdk-overlay-container {
        .ym-popover-main-container {
            position: fixed !important;
            top: auto !important;
            bottom: 0 !important;
            left: 0 !important;
            right: auto !important;
            width: 100%;
            transform: none !important;
            padding: var(--ym-spacing-scale-3);
            padding-top: var(--ym-spacing-scale-7);

            max-height: 100%;
            overflow: auto;
            pointer-events: none;

            ym-popover {
                width: 100%;
                pointer-events: auto;
            }
        }

        .ym-popover-main-backdrop {
            background-color: var(--ym-backdrop-bg);
            opacity: var(--ym-backdrop-opacity);
        }
    }
}

// -----------------
// For arrow inicator and scroll indicator
.ym-custom-scrollbar-container {
    --color: var(--ym-text-color);
    --bg-color: var(--ym-bg-white);
    --bg-color-hover: var(--ym-bg-t-gray-a-16);

    &.ym-custom-dark-scrollbar-container {
        --color: var(--ym-text-white);
        --bg-color: var(--ym-bg-primary-800);
        --bg-color-hover: var(--ym-bg-t-white-a-16);

        .left-scroll-arrow,
        .right-scroll-arrow {
            color: var(--ym-text-gray-100);
        }
    }

    .left-indicator,
    .right-indicator {
        width: var(--ym-spacing-scale-9);
        height: 100%;
        display: flex;
        flex-shrink: 0;
        background-color: var(--bg-color);
        position: absolute;
        top: 0;
        z-index: 1;
        pointer-events: none;
        transition: var(--ym-transition-duration-medium);
        visibility: hidden;
    }

    .left-indicator {
        left: 0;
        background: linear-gradient(90deg, var(--bg-color) 40%, transparent 100%);
    }

    .right-indicator {
        right: 0;
        background: linear-gradient(-90deg, var(--bg-color) 40%, transparent 100%);
    }

    .left-scroll-arrow,
    .right-scroll-arrow {
        top: 50%;
        opacity: 0;
        max-height: var(--ym-spacing-scale-12);

        &:hover,
        &:focus {
            color: var(--color);
            background-color: var(--bg-color-hover);
            opacity: 1;
        }
    }

    .left-scroll-arrow {
        left: 0;
        transform: translateY(-50%);
    }

    .right-scroll-arrow {
        right: 0;
        transform: translateY(-50%) rotate(180deg);
    }

    &.vertical-scrollbars {

        .left-indicator,
        .right-indicator {
            width: 100%;
            height: var(--ym-spacing-scale-9);
            background-color: var(--bg-color);
            top: auto;
            left: 0;
        }

        .left-indicator {
            top: 0;
            background: linear-gradient(180deg, var(--bg-color) 40%, transparent 100%);
        }

        .right-indicator {
            bottom: 0;
            right: auto;
            background: linear-gradient(0deg, var(--bg-color) 40%, transparent 100%);
        }

        .left-scroll-arrow,
        .right-scroll-arrow {
            top: auto;
            left: 50%;
        }

        .left-scroll-arrow {
            top: -28px;
            transform: translateX(-50%) rotate(90deg);
        }

        .right-scroll-arrow {
            right: auto;
            bottom: -28px;
            transform: translateX(-50%) rotate(-90deg);
        }
    }

    &:hover,
    &:focus-within {

        .left-scroll-arrow,
        .right-scroll-arrow {
            opacity: 1;
        }

    }
}

// -----------------
// For pull to refresh
.pull-refresh-container {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 1000;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--ym-text-primary);
    background-color: var(--ym-bg-white);
    border-radius: var(--ym-border-radius-full);
    width: var(--ym-spacing-scale-8);
    height: var(--ym-spacing-scale-8);
    box-shadow: var(--ym-shadow-layer-md);
    opacity: 0;
    transition: var(--ym-transition-duration-medium);

    &.pull-refresh-loading {
        svg {
            animation: var(--ym-motion-keyframes-spin) 1s linear infinite;
        }
    }
}


ym-link {
    display: inline-block;
}

ym-collapsible-content:empty {
    display: none;
}