@import '../1-Helpers/variables';
@import '../1-Helpers/mixins';


// animations
.pulse {
    animation: pulse .6s linear alternate infinite;
}

// positioning
.align {
    &-bottom {
        position: absolute;
        bottom: 0;
    }
    &-top {
        position: absolute;
        top: 0;
    }

    &-center {
        display: flex;
        align-items: center;
        justify-content: center;

        &-bottom {
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
        }
    }
}

.text {
    &-center {
        text-align: center !important;

        &-sm {
            @include mobile-only {
                text-align: center !important;
            };
        }
    }
    &-left {
        text-align: left !important;

        &-sm {
            @include mobile-only {
                text-align: left !important;
            };
        }
    }
    &-right {
        text-align: right !important;

        &-sm {
            @include mobile-only {
                text-align: right !important;
            };
        }
    }

    &-capitalize {
        text-transform: capitalize;
    }
    &-justify {
        text-align: justify;
    }
}


// colors
// special
.primary {
    background: $primary-color !important;
    color: white;

    &.shade {
        background: $primary-shade;
    }
}
.secondary:not(.outline) {
    background: $secondary-color !important;
    color: white;
}

.light {
    background: white !important;
    color: $text-color;
}

// named
.blue:not(.outline) {
    background: $blue;
    color: white;
}

.black {
    background: #000000;
    color: white;
}

.green:not(.outline) {
    @include green;
}
.green {
    &.accent-1 {
        background: $green-accent-1;
    }
    
    &.darken-1 {
        background: $green-dark-1;
    }

    &-light {
        &-4 {
            background: $green-light-4;
        }
        &-5 {
            background: $green-light-5;
        }
    }
}
.orange:not(.outline) {
    @include orange;
}
.orange {
    &.darken-1 {
        background: $orange-dark-1;
    }
    &.darken-2 {
        background: $orange-dark-2;
    }
}
.red:not(.outline) {
    @include red;
}
.red {
    &-light {
        &-4 {
            background: $red-light-4;
        }

        &-5 {
            background: $red-light-5;
        }
    }
}

.white {
    background: white;
    color: $primary-color;
}

// statuses
.error, .info, .success, .warn {
    padding: 1rem 2rem;
    border-radius: 5px;
}
.error {
    border: 1px solid $red;
    background-color: $red-light-5;
    color: $red-dark-3;
}
.info {
    border: 1px solid $blue;
    background-color: $blue-light-5;
    color: $blue-dark-3;
}
.success {
    border: 1px solid $green;
    background-color: $green-light-5;
    color: $green-dark-3;
}
.warn {
    border: 1px solid $orange;
    background-color: $orange-light-5;
    color: $orange-dark-3;
}


// text
// colors
.text {
    &-blue, &-info {
        color: $blue !important;
    }
    &-green, &-success {
        color: $green !important;
    }
    &-orange, &-warn {
        color: $orange !important;
    }
    &-red, &-error {
        color: $red !important;
    }
    &-primary {
        color: $primary-color !important;
    }
    &-secondary {
        color: $secondary-color !important;
    }
    &-white {
        color: white !important;
    }
}

// sizes
.text {
    // large
    &-lg {
        font-size: $text-lg;
    }
    &-xlg {
        font-size: 1.5rem;
    }
    &-xxlg {
        font-size: 1.8rem;
    }

    // small
    &-sm {
        font-size: .8rem;
    }
    &-xsm {
        font-size: .5rem;
    }
}



/* ----------------------------- MISC ----------------------------- */
.col {
    padding: 5px;
}

.container {
    padding: 0 15px;
    background-color: inherit;

    @include laptop-and-up {
        padding: 0 12.5%;
    }
}

.divider {
    width: 100%;
    height: 1px;
    margin: 5px 0;

    @include themify {
        background: themed('divider')
    }
}

.disabled {
    filter: grayscale(1);
    cursor: not-allowed !important;

    * {
        cursor: not-allowed !important;
    }

    &.waves,
    .waves {
        .wave {
            background-color: transparent !important;
        }
    }
}

.hide {
    display: none !important;
}

.h {
    &-max {
        height: max-content !important;
    }
}


.hover {
    // colors
    &-green:hover {
        @include green
    }

    &-orange:hover {
        @include orange
    }

    &-red:hover {
        @include red
    }
}

// background images
.img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

// margin
.m {
    &-auto {
        margin: auto !important;
    }
    
    &-0 {
        margin: 0 !important;
    }
    &-1 {
        margin: 5px !important;
    }
    &-2 {
        margin: 10px !important;
    }
    &-3 {
        margin: 15px !important;
    }

    // bottom
    &b {
        &-auto {
            margin-bottom: auto !important;
        }
        
        &-0 {
            margin-bottom: 0 !important;
        }
        &-1 {
            margin-bottom: 5px !important;
        }
        &-2 {
            margin-bottom: 10px !important;
        }
        &-3 {
            margin-bottom: 15px !important;
        }

        &-sm {
            @include mobile-only {
                &-auto {
                    margin-bottom: auto !important;
                }
            }
        }
    }
    // top
    &t {
        &-0 {
            margin-top: 0 !important;
        }
        &-1 {
            margin-top: 5px !important;
        }
        &-2 {
            margin-top: 10px !important;
        }
    }
    // right
    &r {
        &-0 {
            margin-right: 0 !important;
        }
        &-1 {
            margin-right: 5px !important;
        }
        &-2 {
            margin-right: 10px !important;
        }
        &-3 {
            margin-right: 15px !important;
        }
    }
    // left
    &l {
        &-auto {
            margin-left: auto !important;
        }
        &-0 {
            margin-left: 0 !important;
        }
        &-1 {
            margin-left: 5px !important;
        }
        &-2 {
            margin-left: 10px !important;
        }
        &-3 {
            margin-left: 15px !important;
        }

        // responsive
        &-md {
            @include tablet-and-up {
                &-0 {
                    margin-left: 0 !important;
                }
                &-1 {
                    margin-left: 5px !important;
                }
                &-2 {
                    margin-left: 10px !important;
                }
                &-3 {
                    margin-left: 15px !important;
                }
            }
        }
    }
}

.no-border {
    border: none !important;
}

.opacity {
    &-1 {
        opacity: .1;
    }

    &-2 {
        opacity: .3;
    }

    &-3 {
        opacity: .5;
    }

    &-4 {
        opacity: .7;
    }

    &-5 {
        opacity: 1;
    }
}

.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.p {
    &-0 {
        padding: 0 !important;
    }
    &-1 {
        padding: 5px !important;
    }
    &-2 {
        padding: 10px !important;
    }
    &-3 {
        padding: 15px !important
    }

    // bottom
    &b {
        &-0 {
            padding-bottom: 0 !important;
        }
        &-1 {
            padding-bottom: 5px !important;
        }
        &-2 {
            padding-bottom: 10px !important;
        }
        &-3 {
            padding-bottom: 15px !important
        }
    }
    // top
    &t {
        &-0 {
            padding-top: 0 !important;
        }
        &-1 {
            padding-top: 5px !important;
        }
        &-2 {
            padding-top: 10px !important;
        }
        &-3 {
            padding-left: 15px !important
        }
    }
    // right
    &r {
        &-0 {
            padding-right: 0 !important;

            &-m {
                @include tablet-and-up {
                    padding-right: 0 !important;
                }
            }
        }
        &-1 {
            padding-right: 5px !important;

            &-m {
                @include tablet-and-up {
                    padding-right: 5px !important;
                }
            }
        }
        &-2 {
            padding-right: 10px !important;

            &-m {
                @include tablet-and-up {
                    padding-right: 10px !important;
                }
            }
        }
        &-3 {
            padding-right: 15px !important;

            &-m {
                @include tablet-and-up {
                    padding-right: 15px !important;
                }
            }
        }
    }
    // left
    &l {
        &-0 {
            padding-left: 0 !important
        }
        &-1 {
            padding-left: 5px !important
        }
        &-2 {
            padding-left: 10px !important
        }
        &-3 {
            padding-left: 15px !important
        }

        &-sm {
            @include mobile-only {
                &-0 {
                    padding-left: 0 !important;
                }
            }
        }
    }
}

.pointer {
    cursor: pointer;
}
/* ----------------------------- END MISC ----------------------------- */

/* ----------------------------- OVERIDES ----------------------------- */
.dark {
    background: $darkBackground !important;
    color: $text-color-dark;

    &.blue {
        background-color: transparent !important;
        background: $darkBlueBackground !important;
        color: $text-color-dark;
    }

    &.green {
        background-color: transparent !important;
        background: $darkGreenBackground !important;
        color: $text-color-dark;
    }
}

/* ----------------------------- END OVERIDES ----------------------------- */