@use "../global";

@mixin variant ($name: null) {
    $prefix: null;
    @if $name != null {
        $prefix: #{$name}\:
    }

    .#{$prefix}hide { display: none; }
    .#{$prefix}block { display: block; }
    .#{$prefix}inline { display: inline; }
    .#{$prefix}inline-block { display: inline-block; }

    .#{$prefix}overflow-auto { overflow: auto; }
    .#{$prefix}overflow-hidden { overflow: hidden; }
    .#{$prefix}overflow-x-auto { overflow-x: auto; }
    .#{$prefix}overflow-y-auto { overflow-y: auto; }
    .#{$prefix}overflow-x-hidden { overflow-x: hidden; }
    .#{$prefix}overflow-y-hidden { overflow-y: hidden; }

    .#{$prefix}sticky { position: sticky; top: 0; }
    .#{$prefix}relative { position: relative; }
    .#{$prefix}absolute { position: absolute; }
    .#{$prefix}fixed { position: fixed; }
    .#{$prefix}contents { display: contents; }
}

[hidden] { display: none; }
[disabled] { pointer-events: none; opacity: 0.7; }

@include variant;
@each $bpname, $bpsize in global.$breakpoints {
    @media #{$bpsize} {
        @include variant($bpname);
    }
}

.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-5 { z-index: 5; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }

/* #region Mouse Cursors */
.cursor-pointer { cursor: pointer; }
.cursor-auto { cursor: default; pointer-events: auto; }
.cursor-none { cursor: none; pointer-events: none; }
/* #endregion */

hr {
    margin: var(--size-xl) 0;
    border: 0;
    height: 0.1rem;
    background: var(--color-border);
}

.scrollshadow--horizontal {
    background:
        linear-gradient(to right, var(--shadbg) 33%, transparent),
        linear-gradient(to right, transparent, var(--shadbg) 66%) 100% 0,
        radial-gradient(farthest-side at 0 50%, var(--shad), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 100% 50%, var(--shad), rgba(0,0,0,0)) 100% 0;
    background-size: var(--shadsize) 100%, var(--shadsize) 100%, calc(var(--shadsize) / 3) 100%, calc(var(--shadsize) / 3) 100%;
}
.scrollshadow--vertical {
    background:
        linear-gradient(var(--shadbg) 33%, transparent),
        linear-gradient(transparent, var(--shadbg) 66%) 0 100%,
        radial-gradient(farthest-side at 0 50%, var(--shad), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 100% 50%, var(--shad), rgba(0,0,0,0)) 100% 0;
    background-size: 100% var(--shadsize), 100% var(--shadsize), 100% calc(var(--shadsize) / 3), 100% calc(var(--shadsize) / 3);
}
.scrollshadow--horizontal,
.scrollshadow--vertical {
    --shad: var(--scrollshadow-shadow, rgba(34, 34, 34, 0.3));
    --shadbg: var(--scrollshadow-bg, var(--color-bg));
    --shadsize: var(--scrollshadow-size, 40px);
    background-color: var(--bg);
    background-attachment: local, local, scroll, scroll;
    background-repeat: no-repeat;
}