@use 'vars' as *;
//@use 'modules' as *;


/* 
basic positioning margins etc.
27.09.2025
*/

html,
body,
.scroll-content {
    scroll-behavior: smooth;
}

htm, body{
    margin:0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

iframe {
    width: 100%;
    height: 100%;
}

.apr-non {
    appearance: none;
    -webkit-appearance: none;
}

.wdt-100 {
    width: 100%;
}

.wdt-1em{
    width:1em;
}

.hgh-100 {
    height: 100%;
}

.hgh-1em{
    height:1em;
}

.txt-cnt {
    text-align: center;
    justify-content: center;
}

.txt-rgh {
    text-align: right;
    justify-content: flex-end;
}

.fnt-wgh-700,
.fnt-wgt-700 {
    font-weight: 700;
}

.fnt-wgh-400,
.fnt-wgt-400 {
    font-weight: 400;
}

.fnt-siz-2em {
    font-size: 2em;
}

.fnt-siz-2-5em {
    font-size: 2.5em;
}

.fnt-siz-3em {
    font-size: 3em;
}


.bg{
    background-color:var(--color-background, #fff);
}

/**
* visible for screen readers
**/
.sr-only {
    clip-path: inset(100%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    margin: -1px;
    left:0;
}


.no-select {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    user-select: none;
}


.ovr-hdd,
.ovr-flw-hdd {
    overflow: hidden;
}

.ovr-scr,
.ovr-flw-scr {
    overflow: scroll;
}


.ovr-vsb,
.ovr-flw-vsb {
    overflow: visible;
}

/********* animation & transition ************/


.box-shd {
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}


.drp-shd {
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.4));
}

/********** display **********/
.vis-hdd {
    visibility: hidden;
}


.hidden,
.dsp-non {
    display: none;
}

.dsp-inl {
    display: inline;
}

.dsp-inl-blc {
    display: inline-block;
}

.dsp-blc {
    display: block;
}


.dsp-flx {
    display: flex;
}

.dsp-inl-flx {
    display: inline-flex;
}

.dsp-grd,
.grd {
    display: grid;
}

.grd {
    gap: var(--gap);
    row-gap: var(--row-gap);
}

.gap-0 {
    gap: 0;
}



.pst-stc,
.pst-sticky {
    position: sticky;
    top: 0;
}

.pst-fxd,
.pos-fxd {
    position: fixed;
}

.pst-abs,
.pos-abs {
    position: absolute;
}

.pst-rlt,
.pos-rlt {
    position: relative;
}

//text decoration for links
/*
.txt-dcr {
    text-decoration-color: var(--color-focus, currentColor);
    text-decoration-style: solid;
    text-decoration-line: underline;
    text-decoration-thickness: var(--stroke-width, 1px);
    font-weight: var(--font-weight-link, 400);
}

a {
    color:inherit;
    @extend .txt-dcr
}
*/


a {
    color: inherit;
    text-decoration-color: var(--color-focus, currentColor);
    text-decoration-thickness: var(--stroke-width, 2px);
    text-underline-offset: 0.2em;
}

.lnk-non,
.a-non{
    text-decoration: none;
}


span[style*=text-decoration] {
    text-decoration: none !important
}

@media (min-width:$md) {

    .pst-sticky-md {
        position: sticky;
    }

    .dsp-md-inl {
        display: inline;
    }


    .dsp-md-inl-blc {
        display: inline-block;
    }

    .dsp-md-flx {
        display: flex;
    }

    .dsp-md-blc {
        display: block;
    }

    .dsp-md-inl-blc {
        display: inline-block;
    }

    .dsp-md-non {
        display: none;
    }
}



@media (min-width:$ld) {

    .pst-sticky-ld {
        position: sticky;
    }

    .dsp-ld-inl {
        display: inline;
    }

    .dsp-ld-non {
        display: none;
    }

    .dsp-ld-flx {
        display: flex;
    }

    .dsp-ld-blc {
        display: block;
    }

    .dsp-ld-inl-blc {
        display: inline-block;
    }

    .dsp-min-ld {
        display: block;
    }
}




/* disable selection*/

.usr-slc-non {
    user-select: none;
}

.pnt-evn-non {
    pointer-events: none;
}

.crs-pnt {
    cursor: pointer;
}


/********** floats **********/

.flt-lft {
    float: left;
}

.flt-rgh {
    float: right;
}

.flt-non {
    float: none;
}

.z-ind-1 {
    z-index: -1;
}

.z-ind-100 {
    z-index: 100;
}

.z-ind-500 {
    z-index: 500;
}

.z-ind-1000 {
    z-index: 1000;
}

.z-ind-2000 {
    z-index: 2000;
}

.z-ind-9999 {
    z-index: 9999;
}


@media (min-width:$md) {
    .pst-md-rlt {
        position: relative;
    }

    .pst-md-abs {
        position: absolute;
    }

    .pst-md-fxd {
        position: fixed;
    }
}

@media (min-width:$ld) {
    .pst-ld-rlt {
        position: relative;
    }

    .pst-ld-abs {
        position: absolute;
    }

    .pst-ld-fxd {
        position: fixed;
    }
}

.top-0 {
    top: 0;
}

.lft-0 {
    left: 0;
}

.rgh-0 {
    right: 0;
}

.btt-0 {
    bottom: 0;
}


/********** margins **********/
.mrg-non,
.mrg-0 {
    margin: 0;
}

.mrg-lft-aut {
    margin-left: auto
}


/********** padding **********/
.pdd-1em {
    padding: 1em;
}

.pdd-1rem {
    padding: 1em;
}

.pdd-non,
.pdd-0 {
    padding: 0 !important;
}


/* outline */
.otl-non {
    outline: none;
}


/********** border **********/

.brd-non,
.brd-0 {
    border: 0;
}

.brd-rad {
    border-radius: var(--border-radius)
}

.brd-rad-50 {
    border-radius: 50%
}

.brd {
    border: var(--border-width) var(--border-style) var(--border-color);
}


.hr-sld {
    border-top-style: solid;
}

.hr-dtt {
    border-top-style: dotted;
}


.color-1 {
    color: var(--color1);
}

.col-wht,
.color-white {
    color: #fff;
}


.loading,
.lazy-loading {
    background-image: url(../img/loading.svg );
    background-size: contain;
    background-position: center;
    //@extend .bck-img-no-rpt;
}

/* code */
pre{
white-space:pre-wrap;
padding:1rem;
}

pre,
code{
background-color: var(--color-code, #ddd);
border-radius:0.3rem;
word-break: break-word;
}


code{
padding:0.1em 0.2em;
}