@use "./vars" as v;

// ---- text
.text-light { font-weight: 400; color: var(--text-color-light); }

.bigger { font-size: v.$text-size-bigger !important; }
.big { font-size: v.$text-size-big !important; }
.smaller { font-size: v.$text-size-smaller !important; }
.small { font-size: v.$text-size-small !important; }

// ---- layout
.align-left {
    text-align: left;
    justify-content: left;

    &.x { padding-left: 0px !important; }
}
.align-right {
    text-align: right;
    justify-content: right;

    &.x { padding-right: 0px !important; }
}
.align-center {
    text-align: center !important;
    justify-content: center;
}

.clear-left { clear: left !important }
.clear-right { clear: right !important }
.clear-both { clear: both !important }
.clear-unset { clear: unset !important }

.d-inline { display: inline !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }

.p-relative { position: relative !important }
.p-absolute { position: absolute !important }
.p-fixed { position: fixed !important }
.p-sticky { position: sticky !important }
.p-static { position: static !important }

.ws-nowrap { white-space: nowrap; }


.height-1 { height: 1em; }
.height-2 { height: 2em; }
.height-3 { height: 3em; }
.height-4 { height: 4em; }
.height-5 { height: 5em; }
.height-6 { height: 6em; }
.height-7 { height: 7em; }
.height-8 { height: 8em; }
.height-9 { height: 9em; }
.height-10 { height: 10em; }
.height-15 { height: 15em; }
.height-20 { height: 20em; }
.height-25 { height: 25em; }

// ---- grid / flex

.gap-1 { gap: v.$mp-1 !important; }
.gap-2 { gap: v.$mp-2 !important; }
.gap-3 { gap: v.$mp-3 !important; }
.gap-4 { gap: v.$mp-4 !important; }
.gap-5 { gap: v.$mp-5 !important; }


// ---- ---- grid
@mixin grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
    gap: v.$mp-4;
}
@mixin grid-1 { grid-template-columns: 1fr; }
@mixin grid-2 { grid-template-columns: 1fr 1fr; }
@mixin grid-3 { grid-template-columns: 1fr 1fr 1fr; }

.grid { @include grid; }
.grid-1 { @include grid; @include grid-1; }
.grid-2 { @include grid; @include grid-2; }
.grid-3 { @include grid; @include grid-3; }

// ---- ---- flex
.flex-row { display: flex; flex-direction: row }
.flex-column { display: flex; flex-direction: column }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-grow-2 { flex-grow: 2 !important; }
.flex-grow-3 { flex-grow: 3 !important; }
.flex-grow-4 { flex-grow: 4 !important; }
.flex-grow-5 { flex-grow: 5 !important; }
.flex-grow-6 { flex-grow: 6 !important; }

.float-right { float: right }
.float-left { float: left }

// ---- boxing
.is-fullwidth { width: 100%; }
.is-fullheight { height: 100%; }
.is-fixed-bottom {
    position: fixed;
    bottom: 0;
    margin-bottom: 0px;
    border-radius: 0;
}
.no-border { border: 0px !important; }

.overflow-hidden { overflow: hidden }
.overflow-hidden.is-fullwidth { max-width: 100%; }

.height-full { height: 100%; }

*[draggable="true"] {
    cursor: move;
}


// ---- animations
@keyframes blink {
    from { opacity: 1; }
    to { opacity: 0.4; }
}

.blink { animation: 1s ease-in-out 3s infinite alternate blink; }
.loading { animation: 1s ease-in-out 1s infinite alternate blink; }


// -- colors
.main-color { color: var(--main-color); }
.secondary-color { color: var(--secondary-color); }

.bg-main { background-color: var(--main-color); }
.bg-main-light { background-color: var(--main-color-light); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-secondary-light { background-color: var(--secondary-color-light); }
.bg-transparent { background-color: transparent; }

.border-bottom-main { border-bottom: 1px solid var(--main-color); }
.border-bottom-secondary { border-bottom: 1px solid var(--secondary-color); }

.is-success {
    background-color: v.$green !important;
    border-color: v.$green-dark !important;
}
.is-danger {
    background-color: v.$red !important;
    border-color: v.$red-dark !important;
}


.box-shadow {
    &:hover {
        box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
    }

    &.active {
        box-shadow: 0em 0em 1em rgba(0,0,0,0.4);
    }
}