@use "./vars" as v;

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

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

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


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