// ================================================================================================
//   File Name: pallette.scss
//   Description: Custom color system styles, includes background, border and text colors
//   ----------------------------------------------------------------------------------------------
//    Item Name: Item Name: Modern Admin -Angular 11+ Bootstrap 5 Admin Dashboard Template
//    Version: 3.0
//   Author: PIXINVENT
//   Author URL: http://www.themeforest.net/user/pixinvent
// ================================================================================================

//  ================================================================================================
//  WARNING: PLEASE DO NOT CHANGE THIS VARIABLE FILE.
//  THIS FILE WILL GET OVERWRITTEN WITH EACH STACK TEMPLATE RELEASE.
//  TIP:
//  We suggest you to use this (assets/scss/colors/palette.scss) file for overriding color variables.
//  ================================================================================================


// usage: color("name_of_color", "type_of_color")
// to avoid to repeating map-get($colors, ...)

@function color-function($color, $type) {
    @if map-has-key($colors, $color) {
        $curr_color: map-get($colors, $color);

        @if map-has-key($curr_color, $type) {
            @return map-get($curr_color, $type);
        }
    }

    // @warn "Unknown `#{name}` in $colors.";
    @return null;
}

// Color palettes
@import "material-palette-variables";

// Color Classes
//   Text color: .color .lighten-* / .darken-* / .accent-*
//   Background: .bg-color .bg-lighten-* / .bg-darken-* / .bg-accent-*
//   border: .border-color .border-lighten-* / .border-darken-* / .border-accent-*
//   border-top: .border-top-color .border-top-lighten-* / .border-top-darken-* / .border-top-accent-*
//   border-bottom: .border-bottom-color .border-bottom-lighten-* / .border-bottom-darken-* / .border-bottom-accent-*
//   border-left: .border-left-color .border-left-lighten-* / .border-left-darken-* / .border-left-accent-*
//   border-right: .border-right-color .border-right-lighten-* / .border-right-darken-* / .border-right-accent-*


@each $color_name,
$color in $colors {

    @each $color_type,
    $color_value in $color {
        @if $color_type=="base" {
            .#{$color_name} {
                color: $color_value !important;
            }

            .bg-#{$color_name} {
                background-color: $color_value !important;

                .card-header,
                .card-footer {
                    background-color: transparent;
                }

                &.bg-glow {
                    box-shadow: 0px 1px 20px 1px rgba($color_value, 0.6);
                }
            }

            .selectboxit {
                &.selectboxit-btn {
                    &.bg-#{$color_name} {
                        background-color: $color_value !important;
                    }
                }
            }

            .alert-#{$color_name} {
                border-color: $color_value !important;
                background-color: lighten($color_value, 14%);
                // color: darken($color_value, 25%) !important;
                color: theme-color(white);

                .alert-link {
                    // color: darken($color_value, 35%) !important;
                    color: theme-color(white);
                }
            }

            .border-#{$color_name} {
                border-color: $color_value;
                border: 1px solid;
            }

            // .bg-#{$color_name}, .border-#{$color_name}{
            //   &.badge-glow{
            //     box-shadow: 0px 0px 10px $color_value;
            //   }
            // }
            .overlay-#{$color_name} {
                @include bg-opacity($color_value, 0.8);
            }

            .color-info {
                &.#{$color_name} {
                    background-color: $color_value !important;
                }
            }

            .btn-#{$color_name} {
                border-color: color-function($color_name, "darken-2") !important;
                background-color: $color_value !important;
                color: #FFFFFF;

                &:hover {
                    border-color: color-function($color_name, "darken-1") !important;
                    background-color: color-function($color_name, "lighten-1") !important;
                    color: #FFF !important;
                }

                &:focus,
                &:active {
                    border-color: color-function($color_name, "darken-2") !important;
                    background-color: color-function($color_name, "darken-3") !important;
                    color: #FFF !important;
                }

                &.btn-glow {
                    box-shadow: 0px 1px 20px 1px rgba($color_value, 0.6);
                }
            }

            .btn-outline-#{$color_name} {
                border: 1px solid;
                border-color: $color_value;
                background-color: transparent;
                color: $color_value;

                &:hover {
                    background-color: $color_value;
                    color: #FFF !important;
                }

                &.btn-glow {
                    box-shadow: 0px 1px 20px 1px rgba($color_value, 0.6);
                }
            }

            .progress-#{$color_name} {
                // @include progress-variant($color_value);
            }

            input {

                &[type="checkbox"].bg-#{$color_name},
                &[type="radio"].bg-#{$color_name} {
                    +.custom-control-label {
                        &:before {
                            background-color: $color_value !important;
                        }
                    }
                }
            }

            /* .custom-control-label{
        &:before{
          background-color: #ddd !important;
        }
      } */
            input:focus~.bg-#{$color_name} {
                box-shadow: 0 0 0 .075rem #fff, 0 0 0 .21rem $color_value !important;
            }

            .border-#{$color_name} {
                border-color: $color_value !important;
            }

            .border-top-#{$color_name} {
                border-top: 1px solid $color_value;
            }

            .border-bottom-#{$color_name} {
                border-bottom: 1px solid $color_value;
            }

            .border-left-#{$color_name} {
                border-left: 1px solid $color_value;
            }

            .border-right-#{$color_name} {
                border-right: 1px solid $color_value;
            }
        }

        @else {
            .#{$color_name}.#{$color_type} {
                color: $color_value !important;
            }

            .bg-#{$color_name}.bg-#{$color_type} {
                background-color: $color_value !important;

                &.bg-glow {
                    box-shadow: 0px 1px 20px 1px rgba($color_value, 0.6);
                }
            }

            .btn-#{$color_name}.btn-#{$color_type} {
                border-color: color-function($color_name, "darken-2") !important;
                background-color: $color_value !important;

                &:hover {
                    border-color: color-function($color_name, "darken-2") !important;
                    background-color: color-function($color_name, "darken-3") !important;
                }

                &:focus,
                &:active {
                    border-color: color-function($color_name, "darken-3") !important;
                    background-color: color-function($color_name, "darken-4") !important;
                }
            }

            .btn-outline-#{$color_name}.btn-outline-#{$color_type} {
                border-color: $color_value !important;
                color: $color_value !important;

                &:hover {
                    background-color: $color_value !important;
                }
            }

            .progress-#{$color_name}.progress-#{$color_type} {
                // @include progress-variant($color_value);
            }

            input:focus~.bg-#{$color_name} {
                box-shadow: 0 0 0 .075rem #fff, 0 0 0 .21rem $color_value !important;
            }

            .border-#{$color_name}.border-#{$color_type} {
                border: 1px solid $color_value !important;
            }

            .border-top-#{$color_name}.border-top-#{$color_type} {
                border-top: 1px solid $color_value !important;
            }

            .border-bottom-#{$color_name}.border-bottom-#{$color_type} {
                border-bottom: 1px solid $color_value !important;
            }

            .border-left-#{$color_name}.border-left-#{$color_type} {
                border-left: 1px solid $color_value !important;
            }

            .border-right-#{$color_name}.border-right-#{$color_type} {
                border-right: 1px solid $color_value !important;
            }

            .overlay-#{$color_name}.overlay-#{$color_type} {
                @include bg-opacity($color_value, 0.8);
            }
        }
    }
}

// Shade classes
@each $color,
$color_value in $shades {
    .#{$color} {
        color: $color_value;
    }

    .bg-#{$color} {
        background-color: $color_value;

        &.bg-glow {
            box-shadow: 0px 1px 20px 1px rgba($color_value, 0.6);
        }
    }

    input:focus~.bg-#{$color} {
        // TODO: Need to check input-type sibling border color issue(form>input-groups)
        box-shadow: 0 0 0 .075rem #fff, 0 0 0 .21rem $color_value;
    }

    .border-#{$color} {
        border: 1px solid $color_value;
    }

    .border-top-#{$color} {
        border-top: 1px solid $color_value;
    }

    .border-bottom-#{$color} {
        border-bottom: 1px solid $color_value;
    }

    .border-left-#{$color} {
        border-left: 1px solid $color_value;
    }

    .border-right-#{$color} {
        border-right: 1px solid $color_value;
    }
}

////////////////////////////////////////////////////////

// Gradient Palette

@function color-function($color, $type) {
    @if map-has-key($colors, $color) {
        $curr_color: map-get($colors, $color);

        @if map-has-key($curr_color, $type) {
            @return map-get($curr_color, $type);
        }
    }

    // @warn "Unknown `#{name}` in $colors.";
    @return null;
}

// Color palettes
@import "../../bootstrap/mixins/gradients";

@each $color_name,
$color in $colors {

    @each $color_type,
    $color_value in $color {
        @if $color_type=="base" {
            .bg-gradient-x-#{$color_name} {
                @if (color-function($color_name, "darken-2") !=null) {
                    @include gradient-x(map-get(($color), 'darken-2'), map-get(($color), 'lighten-2'));
                }

                border-bottom: none;
            }

            .bg-gradient-y-#{$color_name} {
                @if (color-function($color_name, "darken-2") !=null) {
                    @include gradient-y(map-get(($color), 'darken-2'), map-get(($color), 'lighten-2'));
                }
            }

            .bg-gradient-directional-#{$color_name} {
                @if (color-function($color_name, "darken-2") !=null) {
                    @include gradient-directional(map-get(($color), 'darken-2'), map-get(($color), 'lighten-2'));
                }
            }

            .bg-gradient-x2-#{$color_name} {
                @if (color-function($color_name, "darken-2") !=null) {
                    @include gradient-x-three-colors(map-get(($color), 'lighten-2'), $color_value, 50%, map-get(($color), 'lighten-3'));
                }
            }

            .bg-gradient-y2-#{$color_name} {
                @if (color-function($color_name, "darken-2") !=null) {
                    @include gradient-y-three-colors(map-get(($color), 'lighten-2'), $color_value, 50%, map-get(($color), 'lighten-3'));
                }
            }

            .bg-gradient-radial-#{$color_name} {
                @if (color-function($color_name, "darken-2") !=null) {
                    @include gradient-radial(map-get(($color), 'darken-2'), map-get(($color), 'lighten-2'));
                }
            }

            .bg-gradient-striped-#{$color_name} {
                @if (color-function($color_name, "lighten-3") !=null) {
                    @include gradient-striped(map-get(($color), 'lighten-3'));
                }
            }

            .bg-gradient-x-#{$color_name},
            .bg-gradient-y-#{$color_name},
            .bg-gradient-directional-#{$color_name},
            .bg-gradient-radial-#{$color_name},
            .bg-gradient-striped-#{$color_name},
            .bg-gradient-x2-#{$color_name},
            .bg-gradient-y2-#{$color_name} {

                .card-header,
                .card-footer {
                    background-color: transparent;
                }
            }
        }
    }
}
