@use '../../../styles/variables';

@mixin thy-option-text-icon-primary {
    &:not(.disabled) {
        &.active {
            .thy-text .thy-icon {
                color: variables.$primary;
            }
        }
    }
}

@mixin thy-option-text-icon-default {
    &:not(.disabled) {
        &.active {
            .thy-text .thy-icon {
                color: variables.$gray-600;
            }
        }
    }
}

@mixin thy-option-common-layout {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    width: 100%;
    position: relative;
}

@mixin thy-option($hover-bg-color: variables.$gray-100, $color: variables.$body-color) {
    min-height: 40px;
    color: $color;
    cursor: variables.$hand-cursor;
    outline-style: none;

    padding: {
        left: 20px;
        right: 20px;
    }
    @include thy-option-common-layout();
    @include thy-option-text-icon-primary();

    // use in tree-select
    .prefix-icon {
        margin-right: 8px;
        color: variables.$gray-500;
    }

    &:not(.disabled) {
        &.hover,
        &:hover {
            background: $hover-bg-color;
        }

        &.active {
            background: rgba(variables.$primary, 0.1);
            color: variables.$primary;

            // &.hover,
            // &:hover {
            // background: $hover-bg-color;
            // color: $body-color;

            // .prefix-icon {
            //     color: $gray-300;
            // }
            // }

            .prefix-icon {
                color: variables.$primary;
            }
        }
    }

    // 禁用状态透明度改为 0.5
    &.disabled {
        background: none;
        cursor: variables.$disabled-cursor;
        opacity: variables.$select-option-disabled-opacity;
    }
}

@mixin thy-option-theme($hover-bg-color: variables.$gray-100, $color: variables.$secondary) {
    @include thy-option-text-icon-primary();
    color: $color;

    &:not(.disabled) {
        &.hover,
        &:hover {
            background: $hover-bg-color;
            color: variables.$body-color;
        }

        &.active {
            background: rgba(variables.$primary, 0.1);
            color: variables.$primary;

            // &.hover,
            // &:hover {
            //     background: $hover-active-bg-color;
            //     color: $body-color;
            // }

            .prefix-icon {
                color: variables.$primary;
            }
        }
    }
}

@mixin thy-multiple-option($hover-active-bg-color: variables.$gray-100) {
    padding: {
        left: 20px;
        right: 35px;
    }
    @include thy-option-text-icon-default();

    .checked-icon {
        visibility: hidden;
        position: absolute;
        right: 20px;
    }

    &:not(.disabled) {
        &.hover,
        &:hover {
            background: $hover-active-bg-color;
        }

        &.active {
            background: transparent;
            color: variables.$body-color;

            .checked-icon {
                visibility: visible;
                color: variables.$primary;
            }

            &.hover,
            &:hover {
                background: $hover-active-bg-color;
                color: variables.$body-color;
            }

            .prefix-icon {
                color: variables.$gray-500;
            }
        }
    }
}

@mixin thy-multiple-option-theme($hover-active-bg-color: variables.$gray-100) {
    @include thy-option-text-icon-default();
    &:not(.disabled) {
        &.hover,
        &:hover {
            background: $hover-active-bg-color;
        }

        &.active {
            background: transparent;
            color: variables.$body-color;

            .checked-icon {
                color: variables.$primary;
            }

            &.hover,
            &:hover {
                background: $hover-active-bg-color;
                color: variables.$body-color;
            }
        }
    }
}

@mixin thy-grid-option {
    .thy-grid-option {
        flex-direction: column;
        vertical-align: middle;
        justify-content: center;
        position: relative;
        margin: variables.$list-grid-option-margin;
        width: variables.$list-grid-option-width;
        height: variables.$list-grid-option-height;
        background: variables.$bg-default;
        border-radius: variables.$border-radius;
        border: solid 1px variables.$gray-200;
        cursor: variables.$hand-cursor;
        outline-style: none;
        @include thy-option-common-layout();
        @include thy-option-text-icon-default();

        .checked-icon {
            visibility: hidden;
            position: absolute;
            right: 10px;
            top: 10px;
            color: variables.$primary;
            text-align: center;
            .thy-icon {
                font-size: 20px;
            }
        }

        &:not(.disabled) {
            &.hover,
            &:hover {
                border: solid 1px variables.$primary;
            }

            &.active {
                background: rgba(variables.$primary, 0.1);
                color: variables.$body-color;
                border: solid 1px variables.$primary;

                .checked-icon {
                    visibility: visible;
                }

                &.hover,
                &:hover {
                    // background: $white;
                    border-color: variables.$primary;
                }
            }
        }

        &.disabled {
            color: variables.$gray-400;
            cursor: variables.$disabled-cursor;
            background-color: variables.$gray-80;

            &.active {
                .checked-icon {
                    visibility: visible;
                    color: variables.$gray-400;
                }
            }
        }

        .thy-grid-option-icon {
            font-size: variables.$list-grid-option-icon-size;
        }

        img.thy-grid-option-icon {
            width: variables.$list-grid-option-icon-size;
        }

        .thy-grid-option-name {
            margin-top: variables.$list-grid-option-name-margin-top;
        }
    }
}

@mixin thy-grid-option-sm {
    .thy-grid-option {
        width: variables.$list-grid-option-sm;
        height: variables.$list-grid-option-sm;
        margin: variables.$list-grid-option-margin-sm;

        .checked-icon {
            right: 5px;
            top: 5px;
            height: 15px;
            width: 15px;
            line-height: 15px;

            > .thy-icon,
            .wtf {
                font-size: 14px;
            }
        }

        .thy-grid-option-name {
            margin-top: variables.$list-grid-option-sm-name-margin-top;
        }
    }
}

@mixin thy-grid-option-theme {
    @include thy-option-text-icon-default();
    .checked-icon {
        background: variables.$primary;
    }

    &:not(.disabled) {
        &.hover,
        &:hover {
            border: solid 1px variables.$primary;
        }

        &.active {
            background: rgba(variables.$primary, 0.1);
            color: variables.$body-color;
            border: solid 1px variables.$primary;

            &.hover,
            &:hover {
                border-color: variables.$primary;
            }
        }
    }
}
