@use "./vars" as v;

// ---- text
.text-light { 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; }
}

.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
@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; }

.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-transparent { background-color: transparent; }

.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;
}
