@header-bg-code-num:                   6;
@nav-item-selected-bg-code-num:        1;
@nav-item-selected-color-code-num:     8;
@nav-prefix-cls:                       nav;

@import "../_antd-style/themes/default";
@import "../app/mixins/index";
@import "../app/variables";
@import "../../_alain-custom-variables";

.getThemeColor(@name, @code-num) {
    @n: ~'@{name}-@{code-num}';
    @getThemeColor: @@n;
}

.dark-aside() {
    .aside {
        background-color:rgb(64, 64, 64);
    }
    .nav {
        >li {
            > a,
            &.@{nav-prefix-cls}-group-title {
                color: rgba(255, 255, 255, 0.67);
            }
            // Selected
            &.@{nav-prefix-cls}-item-selected {
                background-color: rgb(51, 51, 51);
            }
        }
    }
    .nav-floating {
        background-color: rgb(64, 64, 64);
        border: none;
    }
    .user-block {
        .info {
            color: rgba(255, 255, 255, 0.67);
        }
    }
}

.focusing-color-mixin(@color-name) {
    @basic-color:   "@{color-name}-6";
    .get-color-mixin() when(iscolor(@color-name)) {
        @new-color: @color-name
    }
    .get-color-mixin() when(default()) {
        @new-color: @@basic-color;
    }
    .get-color-mixin();

    @new-hover-color:   ~`colorPalette("@{new-color}", 5)`;
    @new-hover-bgcolor: ~`colorPalette("@{new-color}", 1)`;
    @new-active-color:  ~`colorPalette("@{new-color}", 7)`;

    .A-mixin() when(@focusing-full-color-enabled = true), (@focusing-a-color-enabled = true) {
        a {
            color: @new-color;

            &:hover {
              color: @new-hover-color;
            }

            &:active {
              color: @new-active-color;
            }
        }
    }
    .A-mixin();

    .BTN-mixin() when(@focusing-full-color-enabled = true), (@focusing-btn-color-enabled = true) {

        @btn-prefix-cls:  ant-btn;

        .button-color(@color; @new-color; @border) {
            color: @color;
            background-color: @new-color;
            border-color: @border;
        }

        .button-disabled() {
            &.disabled,
            &[disabled] {
              &,
              &:hover,
              &:focus,
              &:active,
              &.active {
                .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
              }
            }
        }

        .@{btn-prefix-cls} {
            &:hover,
            &:focus {
                color: @new-hover-color;
                border-color: @new-hover-color;
            }

            &:active,
            &.active {
                color: @new-active-color;
                border-color: @new-active-color;
            }

            &.@{btn-prefix-cls}-clicked {
                &:after {
                    border-color: @new-color;
                }
            }

            .button-disabled();
        }

        .@{btn-prefix-cls}-default {
        }

        .@{btn-prefix-cls}-primary {
            background-color: @new-color;
            border-color: @new-color;
            &:hover,
            &:focus,
            &.hover {
                color: @btn-primary-color;
                background-color: @new-hover-color;
            }

            &:active,
            &.active {
                color: @btn-primary-color;
                background-color: @new-hover-color;
            }
        }

        .@{btn-prefix-cls}-dashed {
        }

        .@{btn-prefix-cls}-danger {
            .button-color(@btn-danger-color; @btn-danger-bg; @btn-danger-border);

            &:hover,
            &:focus {
              .button-color(@btn-primary-color; @btn-danger-color; @btn-danger-color);
            }

            &:active,
            &.active {
              .button-color(@btn-primary-color; ~`colorPalette("@{btn-danger-color}", 7)`; ~`colorPalette("@{btn-danger-color}", 7)`;);
            }

            &.@{btn-prefix-cls}-clicked {
                &:after {
                    border-color: @btn-danger-border;
                }
            }
        }

        .@{btn-prefix-cls}-background-ghost {
            &.@{btn-prefix-cls}-primary {
                .button-color(@new-color; transparent; @new-color);
                &:hover,
                &:focus {
                    .button-color(@new-hover-color; transparent; @new-hover-color);
                }
                &:active,
                &.active {
                    .button-color(@new-active-color; transparent; @new-active-color);
                }
            }
            &.@{btn-prefix-cls}-danger {
                border-color: @btn-danger-color;
                &:hover,
                &:focus {
                    .button-color(~`colorPalette("@{btn-danger-color}", 5)`; transparent; ~`colorPalette("@{btn-danger-color}", 5)`);
                }
                &:active,
                &.active {
                    .button-color(~`colorPalette("@{btn-danger-color}", 7)`; transparent; ~`colorPalette("@{btn-danger-color}", 7)`);
                }
            }
        }

        .@{btn-prefix-cls}-group {
            .@{btn-prefix-cls}-primary:last-child:not(:first-child),
            .@{btn-prefix-cls}-primary + .@{btn-prefix-cls}-primary {
                border-left-color: @new-active-color;
            }

            .@{btn-prefix-cls}-primary:first-child:not(:last-child) {
                border-right-color: @new-active-color;
            }
        }

    }
    .BTN-mixin();

    .RADIO-mixin() when(@focusing-full-color-enabled = true), (@focusing-radio-color-enabled = true) {
        @radio-prefix-cls: ~"@{ant-prefix}-radio";
        @radio-group-prefix-cls: ~"@{radio-prefix-cls}-group";
        @radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner";

        .@{radio-prefix-cls}-wrapper {
            &:hover {
                .@{radio-inner-prefix-cls} {
                  border-color: @new-color;
                }
            }
        }
        .@{radio-prefix-cls} {
            &-checked,
            &:hover,
            &-focused {
              .@{radio-inner-prefix-cls} {
                border-color: @new-color;
              }
            }
            &-checked:after {
                border-color: @new-color;
            }
            &-inner:after {
                background-color: @new-color;
            }
            &-button-wrapper {
                &:hover {
                    color: @new-color;
                }
                &-checked {
                    color: @new-color;
                    outline: none;
                    &,
                    &:active {
                        border-color: @new-color;
                        box-shadow: -1px 0 0 0 @new-color;
                    }
                    &:first-child {
                        border-color: @new-color;
                    }
                }
            }
        }
    }
    .RADIO-mixin();

    .CHECKBOX-mixin() when(@focusing-full-color-enabled = true), (@focusing-checkbox-color-enabled = true) {
        @checkbox-prefix-cls: ~"@{ant-prefix}-checkbox";
        @checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";

        .@{checkbox-prefix-cls}-wrapper:hover {
            .@{checkbox-prefix-cls}-inner {
                border-color: @new-color;
            }
        }

        .@{checkbox-prefix-cls} {
            &:hover,
            &-input:focus {
                .@{checkbox-prefix-cls}-inner {
                    border-color: @new-color;
                }
            }

            &-checked,
            &-indeterminate {
                .@{checkbox-prefix-cls}-inner {
                    background-color: @new-color;
                    border-color: @new-color;
                }
                &:after {
                    border-color: @new-color;
                }
            }
        }
    }
    .CHECKBOX-mixin();

    .SWITCH-mixin() when(@focusing-full-color-enabled = true), (@focusing-switch-color-enabled = true) {
        @switch-prefix-cls: ~"@{ant-prefix}-switch";

        .@{switch-prefix-cls} {
            &-checked {
                background-color: @new-color;
            }
        }
    }
    .SWITCH-mixin();

    .DROPDOWN-mixin() when(@focusing-full-color-enabled = true), (@focusing-dropdown-color-enabled = true) {
        @dropdown-prefix-cls: ~"@{ant-prefix}-dropdown";

        .@{dropdown-prefix-cls} {
            &-menu {
                &-item,
                &-submenu-title {
                    &-selected,
                    &-selected > a {
                      color: @new-color;
                    }

                    &-selected,
                    &-selected > a,
                    &:hover {
                        background-color: @new-hover-bgcolor;
                    }
                }
            }
        }
    }
    .DROPDOWN-mixin();

    .TAG-mixin() when(@focusing-full-color-enabled = true), (@focusing-tag-color-enabled = true) {
        @tag-prefix-cls: ~"@{ant-prefix}-tag";
        .@{tag-prefix-cls} {
            &-checkable {
                &:not(.@{tag-prefix-cls}-checkable-checked):hover {
                  color: @new-color;
                }
                &-checked {
                  background-color: ~`colorPalette("@{new-color}", 6)`;
                }
                &:active {
                  background-color: ~`colorPalette("@{new-color}", 7)`;
                }
            }
        }
    }
    .TAG-mixin();

    .SPIN-mixin() when(@focusing-full-color-enabled = true), (@focusing-spin-color-enabled = true) {
        @spin-prefix-cls: ~"@{ant-prefix}-spin";

        .@{spin-prefix-cls} {
            color: @new-color;
            &-dot {
                i {
                    background-color: @new-color;
                }
            }
        }
    }
    .SPIN-mixin();

    .INPUT-mixin() when(@focusing-full-color-enabled = true), (@focusing-input-color-enabled = true) {
        @input-prefix-cls: ~"@{ant-prefix}-input";
        @input-number-prefix-cls: ~"@{ant-prefix}-input-number";
        .@{input-prefix-cls},
        .@{input-number-prefix-cls} {
            &-affix-wrapper:hover .@{input-prefix-cls}:not(.@{input-prefix-cls}-disabled),
            &:hover,
            &:focus {
                border-color: @new-hover-color;
            }
            &:focus {
                box-shadow: 0 0 @outline-blur-size @outline-width fade(@new-color, 20%);
            }
            &-disabled {
                &:hover {
                    border-color: @input-border-color;
                }
            }
        }

        .@{input-number-prefix-cls} {
            &-handler {
                &:hover .@{input-number-prefix-cls}-handler-up-inner,
                &:hover .@{input-number-prefix-cls}-handler-down-inner {
                    color: @new-hover-color;
                }
            }
        }
    }
    .INPUT-mixin();

    .PICKER-mixin() when(@focusing-full-color-enabled = true), (@focusing-picker-color-enabled = true) {
        @calendar-prefix-cls: ~"@{ant-prefix}-calendar";
        @calendar-timepicker-prefix-cls: ~"@{ant-prefix}-calendar-time-picker";

        .@{calendar-prefix-cls} {
            &-picker {
                &:hover .@{calendar-prefix-cls}-picker-input:not(.@{ant-prefix}-input-disabled) {
                    border-color: @new-color;
                }
            }
            &-date {
                &:hover {
                    background: @new-hover-bgcolor;
                }

                &:active {
                    background: @new-hover-color;
                }
            }
            &-today .@{calendar-prefix-cls}-date {
                border-color: @new-color;
                color: @new-color;
            }
            &-selected-day .@{calendar-prefix-cls}-date {
                color: #fff;
                &,
                &:hover {
                    background: @new-color;
                }
            }
        }

        .@{ant-prefix}-time-picker-input:hover {
            border-color: @new-color;
        }
    }
    .PICKER-mixin();

    .PAGE-mixin() when(@focusing-full-color-enabled = true), (@focusing-page-color-enabled = true) {
        @pagination-prefix-cls: ~"@{ant-prefix}-pagination";

        .@{pagination-prefix-cls} {
            &-prev,
            &-next,
            &-item {
                &:focus,
                &:hover {
                    border-color: @new-color;
                    a {
                        color: @new-color;
                    }
                }
            }
            &-item {
                &-active {
                    background-color: @new-color;
                    border-color: @new-color;

                    &:focus,
                    &:hover {
                        background-color: @new-hover-color;
                        border-color: @new-hover-color;
                        a {
                            color: #fff;
                        }
                    }
                }
            }
            &-jump-next,
            &-jump-prev {
                &:hover {
                    &:after {
                        color: @new-color;
                    }
                }
            }
            &-disabled {
                &:hover {
                  border-color: @border-color-base;
                    a {
                        color: @disabled-color;
                    }
                }
                a {
                    color: @disabled-color;
                }
            }
        }
    }
    .PAGE-mixin();

    .SELECT-mixin() when(@focusing-full-color-enabled = true), (@focusing-select-color-enabled = true) {
        @select-prefix-cls: ~"@{ant-prefix}-select";
        .@{select-prefix-cls} {
            &-selection {
                &:hover {
                    border-color: @new-hover-color;
                }

                .@{select-prefix-cls}-focused &,
                &:focus,
                &:active {
                    border-color: @new-active-color;
                }
            }
            &-open {
                .@{select-prefix-cls}-selection {
                    border-color: @new-active-color;
                }
            }
        }

        .has-error .ant-select-selection {
            border-color: #f04134 !important;
        }
    }
    .SELECT-mixin();

    .SLIDER-mixin() when(@focusing-full-color-enabled = true), (@focusing-slider-color-enabled = true) {
        @slider-prefix-cls: ~"@{ant-prefix}-slider";
        .@{slider-prefix-cls} {
            &:hover .@{slider-prefix-cls}-handle,
            &-handle:hover {
                border-color: @new-hover-color;
            }
            &:hover {
                .@{slider-prefix-cls}-track {
                    background-color: tint(@new-color, 40%);
                }
            }
            &-track {
                background-color: tint(@new-color, 60%);
            }
            &-handle {
                border-color: tint(@new-color, 50%);

                &:active {
                    box-shadow: 0 0 0 2px fadeout(@new-color, 80%);
                }
            }
            &-dot {
                &-active {
                  border-color: tint(@new-color, 50%);
                }
            }
        }
    }
    .SLIDER-mixin();

    .TABS-mixin() when(@focusing-full-color-enabled = true), (@focusing-tabs-color-enabled = true) {
        @tab-prefix-cls: ~"@{ant-prefix}-tabs";
        .@{tab-prefix-cls} {
            &-ink-bar {
                background-color: @new-color;
            }
            &-nav {
                .@{tab-prefix-cls}-tab {
                    &:hover {
                        color: @new-hover-color;
                    }

                    &:active {
                        color: @new-active-color;
                    }
                }
                .@{tab-prefix-cls}-tab-active {
                    color: @new-color;
                }
            }
        }
    }
    .TABS-mixin();
}