@charset 'utf-8';

/*  ========================================================================
    JUICE -> HELPERS -> TYPOGRAPHY
    ========================================================================  */

.is-left-aligned {
    text-align: left !important;
}

.is-center-aligned {
    text-align: center !important;
}

.is-right-aligned {
    text-align: right !important;
}

.has-default-font-size {
    font-size: $default-font-size !important;
}

// Cycle through all of the sizes
@each $size in $sizes {
    .has-#{$size}-font-size {
        font-size: map-get($default-font-size-sizes, $size) !important;
    }
}

// Cycle through all of the base colors
@each $color-name, $color-value in $base-colors {
    p {
        // Modifiers: Base colors
        &.is-#{$color-name} {
            color: base-color($color-name) !important;
        }
    }

    a {
        // Modifiers: Base colors
        &.is-#{$color-name}:not(.button) {
            color: base-color($color-name) !important;

            // Pseudo classes
            &:hover {
                color: base-color('#{$color-name}-darken-2');
            }

            &:hover {
                color: base-color('#{$color-name}-darken-4');
            }

            &:active {
                color: base-color('#{$color-name}-darken-6');
            }
        }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        // Modifiers: Base colors
        &.is-#{$color-name} {
            color: base-color($color-name) !important;
        }
    }
}

// Cycle through all of the feedback colors
@each $feedback-name, $color-value in $feedback-colors {
    p {
        // Modifiers: Base colors
        &.is-#{$feedback-name} {
            color: feedback-color($feedback-name) !important;
        }
    }

    a {
        // Modifiers: Feedback colors
        &.is-#{$feedback-name}:not(.button) {
            color: feedback-color($feedback-name) !important;

            // Pseudo classes
            &:hover {
                color: feedback-color('#{$feedback-name}-darken-2');
            }

            &:hover {
                color: feedback-color('#{$feedback-name}-darken-4');
            }

            &:active {
                color: feedback-color('#{$feedback-name}-darken-6');
            }
        }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        // Modifiers: Feedback colors
        &.is-#{$feedback-name} {
            color: feedback-color($feedback-name) !important;
        }
    }
}

// Cycle throuhgh all of the breakpoints
@each $breakpoint-name, $breakpoint-value in $breakpoints {
    // Breakpoint
    @include breakpoint($breakpoint-name) {
        .is-left-aligned\@#{$breakpoint-name} {
            text-align: left !important;
        }

        .is-center-aligned\@#{$breakpoint-name} {
            text-align: center !important;
        }

        .is-right-aligned\@#{$breakpoint-name} {
            text-align: right !important;
        }

        .has-default-font-size\@#{$breakpoint-name} {
            font-size: $default-font-size !important;
        }

        // Cycle through all of the sizes
        @each $size in $sizes {
            .has-#{$size}-font-size\@#{$breakpoint-name} {
                font-size: map-get($default-font-size-sizes, $size) !important;
            }
        }
    }
}