@import "./var.scss";
@import "../mixins/mixins.scss";

.u-user-select--none {
    user-select: none;
}

.u-sr-only {
    @include hidden--accessible;
}

// text helpers
// --------------------------------
.u-text--xs {
    font-size: .7em !important;
}

.u-text--sm {
    font-size: .875rem !important;
}

.u-text--md {
    font-size: 1em !important;
}

.u-text--lg {
    font-size: 1.15em !important;
}

.u-text--xl {
    font-size: 1.3em !important;
}

.u-text--xxl {
    font-size: 1.6em !important;
}

.u-text--giant {
    font-size: 5em !important;
}

.u-text--right {
    text-align: right;
}

.u-text--left {
    text-align: left;
}

.u-text--center {
    text-align: center;
}

.u-text--monospace {
    font-family: $font-family-monospace !important;
    font-size: $font-size-small !important;
}

.u-text--subtext {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5; // 24px
    font-style: italic;
}
.u-text--subtext-sm {
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.72; // ~24px
    font-style: italic;
    letter-spacing: .01em;
}

// For vertically centering td
.u-cell--align-middle {
    vertical-align: middle !important;
}

.u-truncate {
    display: inline-block;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.u-pre-line {
    white-space: pre-line;
}

.u-break-all {
    word-break: break-all;
}

.u-break-word {
    word-break: break-word;
}

.u-text--italic {
    font-style: italic;
}

.u-text--bold {
    font-weight: 500;
}

.u-text--normal {
    font-weight: normal;
}

.u-text--uppercase {
    text-transform: uppercase !important;
}

// Form Helpers
// ------------
.u-hide-number-stepper {
    @include hide-number-stepper();
}

// Color Helpers
// -------------

.u-brand-dark {
    color: $color-brand--070;
}

.u-text--muted {
    color: $color-gray--030 !important;
}

.u-text--light {
    color: $color-gray--060 !important;
}

.u-text--reg {
    color: $color-black !important;
}

.u-text--success {
    color: $color-success-dark !important;
}

.u-text--info {
    color: $color-info-dark !important;
}

.u-text--warning {
    color: $color-warning-dark !important;
}

.u-text--danger {
    color: $color-danger-dark !important;
}

.u-text--link {
    color: $--link-color !important;
}

.u-text--light-gray {
    color: $color-light-gray !important;
}

// Only use for icons, not text.
.u-icon--light {
    color: $color-gray--040 !important;
}

// For use on dark themes
.u-dark-theme--white {
    color: $color-white !important;
}

.u-dark-theme--light-gray {
    color: rgba($color-white, .7) !important;
}

// visibility helpers
// ------------------
.u-block {
    display: block;
}

.u-inline-block {
    display: inline-block;
}

.u-transparent {
    opacity: 0;
}

.js-hidden {
    // similar to "hide" but without important!
    // so that jquery show/hide/fadeIn/fadeOut will work
    display: none;
}

.u-visible-xs {
    display: block;

    @media (min-width: $screen-xs) {
        display: none;
    }
}

.hide {
    display: none;
}

.u-hidden-xs {
    @media (max-width: $screen-sm-max) {
        display: none;
    }
}

.u-hidden-sm {
    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
        display: none;
    }
}

.u-hidden-md {
    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
        display: none;
    }
}

.u-hidden-lg {
    @media (min-width: $screen-lg-min) {
        display: none;
    }
}

.u-list-unstyled {
    @include unstyled-list;
}

.u-flat {
    box-shadow: none;
}

// overflow helpers
// ------------------

.u-overflow--visible {
    overflow: visible;
}

.u-overflow--hidden {
    overflow: hidden;
}

.u-overflow--scroll {
    overflow: scroll;
}

// Create a scrolling panel.
.u-scroll {
    height: 100%;
    overflow: auto;
}

// scrollbar visible
.u-scrollbar {
    @include scrollbar;
}

.u-scrollbar--hover-only {
    overflow: hidden;
    &:hover, &:focus, &:focus-within {
        overflow: auto;
    }
}

// float helpers
// -------------

.u-float-clear {
    clear: both !important;
}

.u-float-right {
    float: right !important;
}

.u-float-left {
    float: left !important;
}

.u-clearfix {
    @include clearfix;
}

// grid helpers
// --------------------

.u-grid__column--full-width {
    grid-column: 1 / -1; // go from first to last column (-1)
}

// link styling helpers
// --------------------

.u-link {
    @include u-link-style;
}

.u-link--color-only {
    color: $--link-color;
}

.u-link--danger {
    color: darken($color-danger, 5%);

    &:hover {
        color: darken($color-danger, 15%);
    }
}

// Make link appear as regular text, use sparingly.
.u-text-link, .u-text-link:hover {
    color: $color-gray--100;
    text-decoration: none;
}

// ========================================================
// Spacing utility classes
// Adapted from Basscss framework, bootstrap v4
//
// m   Margin
// p   Padding
// t   Top
// r   Right
// b   Bottom
// l   Left
// x   X-axis (left and right)
// y   Y-axis (top and bottom)
// n   Negative (margin only)
// 0   0 reset
// 1   $space1 (default .25rem)
// 2   $space2 (default .5rem)
// 3   $space4 (default 1rem)
// 5   $space6 (default 2rem)
// 6   $space7 (default 3rem)
// ========================================================

// Margins

// Change or reset default margins using the white space scale.
// Margin auto is used to horizontally center block-level elements with a set width.
.u-mxn1 {
    margin-left: -$space1 !important; margin-right: -$space1 !important;
}
.u-mxn2 {
    margin-left: -$space2 !important; margin-right: -$space2 !important;
}
.u-mxn3 {
    margin-left: -$space4 !important; margin-right: -$space4 !important;
}
.u-mxn4 {
    margin-left: -$space5 !important; margin-right: -$space5 !important;
}
.u-mxn5 {
    margin-left: -$space6 !important; margin-right: -$space6 !important;
}
.u-mxn6 {
    margin-left: -$space7 !important; margin-right: -$space7 !important;
}

.u-myn1 {
    margin-top: -$space1 !important; margin-bottom: -$space1 !important;
}
.u-myn2 {
    margin-top: -$space2 !important; margin-bottom: -$space2 !important;
}
.u-myn3 {
    margin-top: -$space4 !important; margin-bottom: -$space4 !important;
}
.u-myn4 {
    margin-top: -$space5 !important; margin-bottom: -$space5 !important;
}
.u-myn5 {
    margin-top: -$space6 !important; margin-bottom: -$space6 !important;
}
.u-myn6 {
    margin-top: -$space7 !important; margin-bottom: -$space7 !important;
}

.u-m0  {
    margin: 0 !important;
}
.u-mt0 {
    margin-top: 0 !important;
}
.u-mr0 {
    margin-right: 0 !important;
}
.u-mb0 {
    margin-bottom: 0 !important;
}
.u-ml0 {
    margin-left: 0 !important;
}

.u-m1  {
    margin: $space1 !important;
}
.u-mt1 {
    margin-top: $space1 !important;
}
.u-mr1 {
    margin-right: $space1 !important;
}
.u-mb1 {
    margin-bottom: $space1 !important;
}
.u-ml1 {
    margin-left: $space1 !important;
}

.u-m2  {
    margin: $space2 !important;
}
.u-mt2 {
    margin-top: $space2 !important;
}
.u-mr2 {
    margin-right: $space2 !important;
}
.u-mb2 {
    margin-bottom: $space2 !important;
}
.u-ml2 {
    margin-left: $space2 !important;
}

.u-m3  {
    margin: $space4 !important;
}
.u-mt3 {
    margin-top: $space4 !important;
}
.u-mr3 {
    margin-right: $space4 !important;
}
.u-mb3 {
    margin-bottom: $space4 !important;
}
.u-ml3 {
    margin-left: $space4 !important;
}

.u-m4  {
    margin: $space5 !important;
}
.u-mt4 {
    margin-top: $space5 !important;
}
.u-mr4 {
    margin-right: $space5 !important;
}
.u-mb4 {
    margin-bottom: $space5 !important;
}
.u-ml4 {
    margin-left: $space5 !important;
}

.u-m5  {
    margin: $space6 !important;
}
.u-mt5 {
    margin-top: $space6 !important;
}
.u-mr5 {
    margin-right: $space6 !important;
}
.u-mb5 {
    margin-bottom: $space6 !important;
}
.u-ml5 {
    margin-left: $space6 !important;
}

.u-m6  {
    margin: $space7 !important;
}
.u-mt6 {
    margin-top: $space7 !important;
}
.u-mr6 {
    margin-right: $space7 !important;
}
.u-mb6 {
    margin-bottom: $space7 !important;
}
.u-ml6 {
    margin-left: $space7 !important;
}

.u-mx-auto {
    margin-left: auto !important; margin-right: auto !important;
}
.u-mt-auto {
    margin-top: auto !important;
}
.u-mb-auto {
    margin-bottom: auto !important;
}
.u-ml-auto {
    margin-left: auto !important;
}
.u-mr-auto {
    margin-right: auto !important;
}

// Padding

.u-p0  {
    padding: 0 !important;
}
.u-py0 {
    padding-top: 0 !important; padding-bottom: 0 !important;
}
.u-px0 {
    padding-left: 0 !important; padding-right: 0 !important;
}
.u-pt0 {
    padding-top: 0 !important;
}
.u-pr0 {
    padding-right: 0 !important;
}
.u-pb0 {
    padding-bottom: 0 !important;
}
.u-pl0 {
    padding-left: 0 !important;
}

.u-p1  {
    padding: $space1 !important;
}
.u-py1 {
    padding-top: $space1 !important; padding-bottom: $space1 !important;
}
.u-px1 {
    padding-left: $space1 !important; padding-right: $space1 !important;
}
.u-pt1 {
    padding-top: $space1 !important;
}
.u-pr1 {
    padding-right: $space1 !important;
}
.u-pb1 {
    padding-bottom: $space1 !important;
}
.u-pl1 {
    padding-left: $space1 !important;
}

.u-p2  {
    padding: $space2 !important;
}
.u-py2 {
    padding-top: $space2 !important; padding-bottom: $space2 !important;
}
.u-px2 {
    padding-left: $space2 !important; padding-right: $space2 !important;
}
.u-pt2 {
    padding-top: $space2 !important;
}
.u-pr2 {
    padding-right: $space2 !important;
}
.u-pb2 {
    padding-bottom: $space2 !important;
}
.u-pl2 {
    padding-left: $space2 !important;
}

.u-p3  {
    padding: $space4 !important;
}
.u-py3 {
    padding-top: $space4 !important; padding-bottom: $space4 !important;
}
.u-px3 {
    padding-left: $space4 !important; padding-right: $space4 !important;
}
.u-pt3 {
    padding-top: $space4 !important;
}
.u-pr3 {
    padding-right: $space4 !important;
}
.u-pb3 {
    padding-bottom: $space4 !important;
}
.u-pl3 {
    padding-left: $space4 !important;
}

.u-p4  {
    padding: $space5 !important;
}
.u-py4 {
    padding-top: $space5 !important; padding-bottom: $space5 !important;
}
.u-px4 {
    padding-left: $space5 !important; padding-right: $space5 !important;
}
.u-pt4 {
    padding-top: $space5 !important;
}
.u-pr4 {
    padding-right: $space5 !important;
}
.u-pb4 {
    padding-bottom: $space5 !important;
}
.u-pl4 {
    padding-left: $space5 !important;
}

.u-p5  {
    padding: $space6 !important;
}
.u-py5 {
    padding-top: $space6 !important; padding-bottom: $space6 !important;
}
.u-px5 {
    padding-left: $space6 !important; padding-right: $space6 !important;
}
.u-pt5 {
    padding-top: $space6 !important;
}
.u-pr5 {
    padding-right: $space6 !important;
}
.u-pb5 {
    padding-bottom: $space6 !important;
}
.u-pl5 {
    padding-left: $space6 !important;
}

.u-p6  {
    padding: $space7 !important;
}
.u-py6 {
    padding-top: $space7 !important; padding-bottom: $space7 !important;
}
.u-px6 {
    padding-left: $space7 !important; padding-right: $space7 !important;
}
.u-pt6 {
    padding-top: $space7 !important;
}
.u-pr6 {
    padding-right: $space7 !important;
}
.u-pb6 {
    padding-bottom: $space7 !important;
}
.u-pl6 {
    padding-left: $space7 !important;
}

.u-border {
    border: $--border-base !important;
}
.u-border-t {
    border-top: $--border-base !important;
}
.u-border-r {
    border-right: $--border-base !important;
}
.u-border-b {
    border-bottom: $--border-base !important;
}
.u-border-l {
    border-left: $--border-base !important;
}

.u-border-0 {
    border: none !important;
}
.u-border-t0 {
    border-top: none !important;
}
.u-border-r0 {
    border-right: none !important;
}
.u-border-b0 {
    border-bottom: none !important;
}
.u-border-l0 {
    border-left: none !important;
}

.u-border-radius-0 {
    border-radius: 0 !important;
}

.u-border-radius {
    border-radius: $--border-radius-base !important;
}

.u-border-radius--top {
    border-top-left-radius: $--border-radius-base;
    border-top-right-radius: $--border-radius-base;
}

.u-border-radius--bottom {
    border-bottom-left-radius: $--border-radius-base;
    border-bottom-right-radius: $--border-radius-base;
}

.u-width100 {
    width: 100% !important;
}
.u-height100 {
    height: 100%;
}

.u-mw-100 {
    max-width: 100% !important;
}

.u-mh-100 {
    max-height: 100% !important;
}

.vue-portal-target:empty {
    display: none;
}

// Vertical Alignment helpers

.u-inline-block--v-align-top {
    vertical-align: top;
}

.u-inline-block--v-align-middle {
    vertical-align: middle;
}

.u-inline-block--v-align-bottom {
    vertical-align: bottom;
}

.u-inline-block--v-align-baseline {
    vertical-align: baseline;
}

// Background color helpers

.u-background--transparent {
    background-color: transparent;
}

.u-background--base {
    background-color: $--background-color-base;
    color: $color-base-black;
}

.u-background--success {
    background-color: $color-success;
    color: $color-white;
}

.u-background--danger {
    background-color: $color-danger;
    color: $color-white;
}

.u-background--warning {
    background-color: $color-warning;
    color: $color-white;
}

.u-background--info {
    background-color: $color-info;
    color: $color-white;
}

.u-background--success-light {
    background-color: $color-success-light;
}

.u-background--danger-light {
    background-color: $color-danger-light;
}

.u-background--warning-light {
    background-color: $color-warning-light;
}

.u-background--info-light {
    background-color: $color-info-light;
}

.u-background--success-dark {
    background-color: $color-success-dark;
    color: $color-white !important;
}

.u-background--danger-dark {
    background-color: $color-danger-dark;
    color: $color-white !important;
}

.u-background--warning-dark {
    background-color: $color-warning-dark;
    color: $color-white !important;
}

.u-background--info-dark {
    background-color: $color-info-dark;
    color: $color-white !important;
}

.u-cursor--pointer {
    cursor: pointer !important;
}
.u-cursor--text {
    cursor: text !important;
}