@use '../base/mixin' as mixins;
@use '../base/variables' as vars;
@use 'sass:color' as color;

$button: (
    base: (
        color: var(--clr-black-100),
        font-family: var(--font-default),
    ),
    fab: (
        color: var(--clr-black-60),
    ),
    fab-hover: (
        color: var(--clr-black-100),
    ),
    text-hover: (
        background: var(--clr-black-15),
    ),
    text-focus: (
        background: var(--clr-black-20),
    ),
    text-active: (
        background: var(--clr-black-30),
    ),
    text-base: (
        color: var(--clr-black-60),
    ),
    text-base-hover: (
        color: var(--clr-black-100),
    ),
    text-gray: (
        color: var(--clr-black-60),
    ),
    text-gray-hover: (
        color: var(--clr-blue-60),
    ),
    text-blue: (
        color: var(--clr-blue-100),
    ),
    text-blue-hover: (
        color: var(--clr-black-100),
    ),
    fill-base: (
        background-color: var(--clr-black-100),
        color: var(--clr-white-100),
    ),
    fill-blue: (
        background-color: var(--clr-blue-10),
        color: var(--clr-blue-100),
    ),
    fill-gray: (
        background-color: var(--clr-gray-5),
        color: var(--clr-black-40),
    ),
    fill-black: (
        background-color: var(--clr-black-100),
        color: var(--clr-white-100),
    ),
    fill-green: (
        border: 1px solid color.scale(vars.$clr-green-80, $lightness: -10%),
        color: var(--clr-white-100),
        background-color: var(--clr-green-80),
    ),
    fill-green-hover: (
        background-color: color.scale(vars.$clr-green-80, $lightness: -10%),
    ),
    fill-green-light: (
        border-color: color.scale(vars.$clr-green-10, $lightness: -10%),
        color: var(--clr-green-100),
        background-color: var(--clr-green-10),
    ),
    fill-green-light-hover: (
        background-color: color.scale(vars.$clr-green-10, $lightness: -10%),
    ),
    fill-red: (
        border: 1px solid color.scale(vars.$clr-red-100, $lightness: -10%),
        color: var(--clr-white-100),
        background-color: vars.$clr-red-100,
    ),
    fill-red-hover: (
        background-color: color.scale(vars.$clr-red-100, $lightness: -10%),
    ),
    fill-red-light: (
        border-color: color.scale(vars.$clr-red-10, $lightness: -10%),
        color: var(--clr-red-100),
        background-color: var(--clr-red-10),
    ),
    fill-red-light-hover: (
        background-color: color.scale(vars.$clr-red-10, $lightness: -10%),
    ),
    outline: (
        border: 1px solid var(--clr-blue-40),
    ),
    outline-blue: (
        color: var(--clr-blue-100),
    ),
    outline-base: (
        color: var(--clr-black-100),
    ),
    disabled: (
        background-color: var(--clr-gray-5),
        color: var(--clr-black-40),
    ),
);

:root {
    @each $element, $elements in $button {
        @each $style-token, $value in $elements {
            #{mixins.generateCssVar('button', #{$element}, #{$style-token})}: #{$value};
        }
    }
}

button {
    line-height: 1;
    cursor: pointer;
}

.c-button {
    display: inline-flex;
    align-items: center;
    font-family: var(--rt-button-base-font-family);
    line-height: 1;
    position: relative;
    justify-content: center;
    font-size: 1rem;
    color: var(--rt-button-base-color);
    transition: all 0.15s linear;

    //FAB
    &[class*='--fab'] {
        border: 0;
        background-color: transparent;
        color: var(--rt-button-fab-color);

        &:hover {
            color: var(--rt-button-fab-hover-color);

            svg {
                g {
                    fill: var(--rt-button-fab-hover-color);
                }
            }
        }
    }

    // --fab {color}

    // TEXT
    &[class*='--txt-'] {
        border: 0;
        background-color: transparent;
        border-radius: 5px;

        &:hover {
            background: var(--rt-button-text-hover-background);
        }

        &:focus {
            background: var(--rt-button-text-focus-background);
        }

        &:active {
            background: var(--rt-button-text-active-background);
        }

        &[class*='base'] {
            color: var(--rt-button-text-base-color);

            &:hover {
                color: var(--rt-button-text-base-hover-color);

                svg {
                    g {
                        fill: var(--rt-button-text-base-hover-color);
                    }
                }
            }
        }

        &[class*='gray'] {
            color: var(--rt-button-text-gray-color);

            &:hover {
                color: var(--rt-button-text-gray-hover-color);

                svg {
                    g {
                        fill: var(--rt-button-text-gray-hover-color);
                    }
                }
            }
        }

        &[class*='blue'] {
            color: var(--rt-button-text-blue-color);

            .c-circle {
                border-color: var(--rt-button-text-blue-color);
            }

            &:hover {
                color: var(--rt-button-text-blue-hover-color);

                .c-circle {
                    border-color: var(--rt-button-text-blue-hover-color);
                }
            }
        }
    }

    // --txt-{color}

    // COLOR
    &[class*='--fill-'] {
        border: 0;
        border-radius: mixins.rem(6);

        &[class*='base'] {
            background-color: var(--rt-button-fill-base-background-color);
            color: var(--rt-button-fill-base-color);
        }

        &[class*='blue'] {
            background-color: var(--rt-button-fill-blue-background-color);
            color: var(--rt-button-fill-blue-color);
        }

        &[class*='gray'] {
            background-color: var(--rt-button-fill-gray-background-color);
            color: var(--rt-button-fill-gray-color);
        }

        &[class*='black'] {
            background-color: var(--rt-button-fill-black-background-color);
            color: var(--rt-button-fill-black-color);
        }

        &[class*='green'] {
            border: var(--rt-button-fill-green-border);
            border-radius: 2px;
            color: var(--rt-button-fill-green-color);
            box-shadow: 0 2px 4px rgba(24, 24, 24, 0.1);
            background-color: var(--rt-button-fill-green-background-color);

            &:hover {
                background-color: var(--rt-button-fill-green-hover-background-color);
            }

            &[class*='-light'] {
                border-color: var(--rt-button-fill-green-light-border-color);
                color: var(--rt-button-fill-green-light-color);
                background-color: var(--rt-button-fill-green-light-background-color);

                &:hover {
                    background-color: var(--rt-button-fill-green-light-hover-background-color);
                }
            }
        }

        &[class*='red'] {
            border: var(--rt-button-fill-red-border);
            border-radius: 2px;
            color: var(--rt-button-fill-red-color);
            box-shadow: 0 2px 4px rgba(24, 24, 24, 0.1);
            background-color: var(--rt-button-fill-red-background-color);

            &:hover {
                background-color: var(--rt-button-fill-red-hover-background-color);
            }

            &[class*='-light'] {
                border-color: var(--rt-button-fill-red-light-border-color);
                color: var(--rt-button-fill-red-light-color);
                background-color: var(--rt-button-fill-red-light-background-color);

                &:hover {
                    background-color: var(--rt-button-fill-red-light-hover-background-color);
                }
            }
        }
    }

    // --fill-{color}

    // OUTLINE
    &[class*='--outline-'] {
        border: var(--rt-button-outline-border);
        border-radius: mixins.rem(40);
        background-color: transparent;

        &[class*='blue'] {
            color: var(--rt-button-outline-blue-color);
        }

        &[class*='base'] {
            color: var(--rt-button-outline-base-color);
        }
    }

    // --outline-{color}

    // SIZE
    &[class*='--size'] {
        &[class*='-sm'] {
            height: 1.75rem;
            padding: 0 0.75rem;
            font-size: mixins.rem(14);

            svg + span {
                margin-left: 0.75rem;
            }
        }

        &[class*='-md'] {
            height: 2.5rem;
            padding: 0 1.25rem;
            font-size: mixins.rem(18);

            svg + span {
                margin-left: mixins.rem(15);
            }
        }

        &[class*='-l'] {
            height: mixins.rem(60);
            padding: 0 2.5rem;
            font-size: mixins.rem(18);
        }
    }

    // --size-{size}

    // HEIGHT
    &[class*='--h-'] {
        &[class*='40'] {
            height: 40px;
            padding: 0 15px;
        }

        &[class*='30'] {
            height: 30px;
            padding: 0 10px;
        }
    }

    // --h-{height}

    // SHADOW
    &[class*='--shadow'] {
        box-shadow: 0 2px 4px rgba(24, 24, 24, 0.1);
    }

    // --shadow

    // DISABLED
    &[class*='--disabled'] {
        background-color: var(--rt-button-disabled-background-color) !important;
        color: var(--rt-button-disabled-color) !important;
        cursor: not-allowed !important;
    }

    // --disabled
}