@import "variables";
@import "mixins/layout-theme";

/**
        Theme Colors
**/
$color-alternatives: (
    'primary': $primary,
    'success': $success,
    'info': $info,
    'danger': $danger,
    'warning': $warning
);

/**
        DARK Theme
**/
@mixin theme-dark-sidebar(
    $background-color,
    $foreground-color,
    $active-color,
    $accent-color
) {
    @include setup-sidebar((
        'background': $background-color,
        'border': none,
        'border-slim-submenu': lighten($background-color, 15%),
        'brand-color': $accent-color,
        'text-color': $foreground-color,
        'text-color-muted': rgba($foreground-color, 0.7),
        'link-color': $active-color,
        'link-color-hover': darken($active-color, 10%),
        'link-color-muted': rgba($foreground-color, 0.7),
        'scroll-rail-color': lighten($background-color, 40%),
        'scroll-thumb-color': lighten($background-color, 30%),
    ));

    @include setup-sidebar-menu((
        'accent-color': $accent-color,
        'accent-color-hover': lighten($active-color, 10%),
        'background-color': transparent,
        'text-color': $foreground-color,
        'icon-color': $foreground-color,
        'arrow-color': $foreground-color,
        'background-color-hover': transparent,
        'slim-background-color-hover': transparent,
        'text-color-hover': #fff,
        'slim-text-color-hover': #fff,
        'icon-color-hover': #fff,
        'slim-icon-color-hover': #fff,
        'arrow-color-hover': #fff,
        'background-color-active': transparent,
        'slim-background-color-active': transparent,
        'text-color-active': $active-color,
        'slim-text-color-active': $active-color,
        'icon-color-active': $accent-color,
        'slim-icon-color-active': $accent-color,
        'arrow-color-active': $accent-color,
    ));
}

@mixin theme-dark-navbar(
    $background-color,
    $accent-color
) {
    @include setup-navbar((
        'background': $background-color,
        'brand-color': $accent-color,
        'between-border-color': $background-color,
        'menu-item-color': rgba(#fff, 0.7),
        'menu-item-hover-color': rgba(#fff, 0.9),
        'menu-item-active-background': rgba(black, 0.2),
        'menu-item-active-color': #fff,
        'menu-item-accent-color': $accent-color,
        'menu-item-accent-hover-color': rgba($accent-color, 0.2),
        'dropdown-active-color': #fff,
        'dropdown-active-background': $accent-color,
    ));
}

@each $key, $color in $color-alternatives {
    // Global Theme
    .layout--theme--dark--#{$key} {
        @include setup-theme(('theme-color': $color));

        @include theme-dark-sidebar(
            #273344,      // Background
            #8492a6,      // Text
            $color,         // Active text color 
            $color          // Accent 
        );

        @include theme-dark-navbar(
            #273344,
            $color
        );
    }

    .theme-dark-#{$key} {
        @include setup-theme(('theme-color': $color));
    }

    // Navbar theme
    .navbar-dark-#{$key} {
        @include theme-dark-navbar(
            #273344,
            $color
        );
    }

    // Sidebar theme
    .sidebar-dark-#{key} {
        @include theme-dark-sidebar(
            #273344,      // Background
            #8492a6,      // Text
            $color,         // Active text color 
            $color          // Accent 
        );
    }
}

/**
        LIGHT Theme
**/
@mixin theme-light-sidebar(
    $background-color,
    $foreground-color,
    $active-color,
    $accent-color
) {
    @include setup-sidebar((
        'background': $background-color,
        'border': 1px solid $gray-400,
        'border-slim-submenu': 1px solid $gray-400,
        'brand-color': $accent-color,
        'text-color': $foreground-color,
        'text-color-muted': rgba($foreground-color, 0.7),
        'link-color': $active-color,
        'link-color-hover': darken($active-color, 10%),
        'link-color-muted': rgba($foreground-color, 0.7),
        'scroll-rail-color': lighten($background-color, 40%),
        'scroll-thumb-color': lighten($background-color, 30%),
    ));

    @include setup-sidebar-menu((
        'accent-color': $accent-color,
        'accent-color-hover': lighten($active-color, 10%),
        'background-color': transparent,
        'text-color': $foreground-color,
        'icon-color': $foreground-color,
        'arrow-color': $foreground-color,
        'background-color-hover': transparent,
        'slim-background-color-hover': transparent,
        'text-color-hover': lighten($active-color, 10%),
        'slim-text-color-hover': lighten($active-color, 10%),
        'icon-color-hover': lighten($active-color, 10%),
        'slim-icon-color-hover': lighten($active-color, 10%),
        'arrow-color-hover': lighten($active-color, 10%),
        'background-color-active': transparent,
        'slim-background-color-active': transparent,
        'text-color-active': $active-color,
        'slim-text-color-active': $active-color,
        'icon-color-active': $accent-color,
        'slim-icon-color-active': $accent-color,
        'arrow-color-active': $accent-color,
    ));
}

@mixin theme-light-navbar(
    $background-color,
    $accent-color
) {
    @include setup-navbar((
        'background': $background-color,
        'brand-color': $accent-color,
        'between-border-color': $gray-200,
        'menu-item-color': $navbar-light-color,
        'menu-item-hover-color': $navbar-light-hover-color,
        'menu-item-active-color': $gray-900,
        'menu-item-active-background': rgba(black, 0.1),
        'menu-item-accent-color': $accent-color,
        'menu-item-accent-hover-color': $gray-400,
        'dropdown-active-color': #fff,
        'dropdown-active-background': $accent-color,
    ));
}

@each $key, $color in $color-alternatives {
    // Global Theme
    .layout--theme--light--#{$key} {
        @include setup-theme(('theme-color': $color));

        @include theme-light-sidebar(
            $white,         // Background
            $gray-800,      // Text
            $color,         // Active text color 
            $color          // Accent 
        );

        @include theme-light-navbar(
            $white,
            $color
        );
    }

    .theme-light-#{$key} {
        @include setup-theme(('theme-color': $color));
    }

    // Navbar theme
    .navbar-light-#{$key} {
        @include theme-light-navbar(
            $white,
            $color
        );
    }

    // Sidebar theme
    .sidebar-light-#{key} {
        @include theme-light-sidebar(
            #273344,      // Background
            #8492a6,      // Text
            $color,         // Active text color 
            $color          // Accent 
        );
    }
}

/**
        COLOR Theme
**/
@mixin theme-color-sidebar(
    $background-color,
    $foreground-color
) {
    @include setup-sidebar((
        'background': $background-color,
        'border': none,
        'border-slim-submenu': 1px solid rgba($foreground-color, 0.5),
        'brand-color': $foreground-color,
        'badge-override': rgba($foreground-color, 0.5),
        'text-color': $foreground-color,
        'text-color-muted': rgba($foreground-color, 0.5),
        'link-color': #fff,
        'link-color-hover': #fff,
        'link-color-muted': rgba($foreground-color, 0.5),
        'scroll-rail-color': lighten($background-color, 40%),
        'scroll-thumb-color': lighten($background-color, 30%),
    ));

    @include setup-sidebar-menu((
        'accent-color': #fff,
        'accent-color-hover': #fff,
        'background-color': initial,
        'text-color': $foreground-color,
        'icon-color': $foreground-color,
        'arrow-color': $foreground-color,
        'background-color-hover': transparent,
        'slim-background-color-hover': transparent,
        'text-color-hover': $white,
        'slim-text-color-hover': $white,
        'icon-color-hover': $white,
        'slim-icon-color-hover': $white,
        'arrow-color-hover': $white,
        'background-color-active': transparent,
        'slim-background-color-active': transparent,
        'text-color-active': $white,
        'slim-text-color-active': $white,
        'icon-color-active': $white,
        'slim-icon-color-active': $white,
        'arrow-color-active': $white,
    ));
}

@mixin theme-color-navbar(
    $background-color,
    $foreground-color
) {
    @include setup-navbar((
        'background': $background-color,
        'brand-color': $foreground-color,
        'between-border-color': $background-color,
        'menu-item-color': $foreground-color,
        'menu-item-hover-color': $white,
        'menu-item-active-background': rgba($black, 0.1),
        'menu-item-active-color': $white,
        'menu-icon-w-badge-color': change-color($background-color, $lightness: 70%),
        'menu-item-accent-color': $white,
        'menu-item-accent-hover-color': rgba($white, 0.3),
        'dropdown-active-color': #fff,
        'dropdown-active-background': $background-color,
    ));
}

@each $key, $color in $color-alternatives {
    // Global Theme
    .layout--theme--color--#{$key} {
        @include setup-theme(('theme-color': $color));

        @include theme-color-sidebar(
            $color,             // Background
            rgba($white, 0.7)  // Text
        );

        @include theme-color-navbar(
            $color,
            rgba($white, 0.7)
        );

        // Override Layout Navbar Badges
        .layout__navbar .navbar-themed {
            .icon-with-badge .icon-with-badge__badge {
                background-color: change-color($color, $lightness: 70%) !important;
            }
        }

        // Override Layout Sidebar Badges
        .layout__sidebar .sidebar {
            .badge {
                background-color: rgba($white, 0.5),
            }
        }
    }

    .theme-color-#{$key} {
        @include setup-theme(('theme-color': $color));
    }

    // Navbar theme
    .navbar-color-#{$key} {
        @include setup-theme(('theme-color': $color));

        @include theme-color-navbar(
            $color,
            rgba($white, 0.7)
        );

        // Override Badges
        &.navbar,
        .navbar.navbar-themed {
            .icon-with-badge .icon-with-badge__badge {
                background-color: change-color($color, $lightness: 70%) !important;
            }
        }
    }

    // Sidebar theme
    .sidebar-color-#{key} {
        @include setup-theme(('theme-color': $color));

        @include theme-color-sidebar(
            $color,             // Background
            rgba($white, 0.7)  // Text 
        );

        // Override Badges
        .badge {
            background-color: rgba($white, 0.5),
        }
    }
}

@include apply-layout-theme-accent();