@import "../../styles/function.scss";
@import "../../styles/variable.scss";

.fine-button {
    margin: 0;
    display: inline-flex;
    position: relative;
    overflow: visible;
    align-items: center;
    line-height: normal;
    box-sizing: border-box;
    justify-content: center;
    height: -height(button-normal);
    padding: 0 -padding(button-normal);
    background: -background(button-default);
    border-width: -border-width(button-default);
    border-color: -border-color(button-default);
    border-radius: -border-radius(button-default);
    transition: all -duration(default) -var(timing-function);

    &::before {
        top: 50%;
        left: 50%;
        opacity: 0;
        width: 100%;
        height: 100%;
        content: none;
        border: inherit;
        position: absolute;
        border-radius: inherit;
        background: -color(black);
        border-color: -color(black);
        transform: translate(-50%, -50%);
    }

    &::after {
        content: none;
    }

    &__content {
        flex: 1;
        display: flex;
        overflow: hidden;
        align-items: center;
        justify-content: center;
    }

    &__icon {
        color: -color(button-default);
        font-size: -icon-size(button-normal);
        transition: color -var(duration) -var(timing-function);
    }

    &__text {
        color: -color(button-default);
        font-size: -text-size(button-normal);
        transition: color -var(duration) -var(timing-function);
        white-space: nowrap;
    }

    &__icon+&__text {
        margin-left: 4rpx;
    }

    @each $key in $colorTypes {
        &--#{$key} {
            @if $key==default {
                background: -background(button-default);
                border-color: -color(button-default-border);

                .fine-button__icon,
                .fine-button__text {
                    color: -color(button-default-text);
                }
            }

            @else {
                background: -background(button-#{$key});
                border-color: -color(button-#{$key}-border);

                .fine-button__icon,
                .fine-button__text {
                    color: -color(button-main-text);
                }
            }
        }
    }

    @each $key in $sizeTypes {
        &--#{$key} {
            height: -height(button-#{$key});
            padding: 0 -padding(button-#{$key});

            .fine-button__icon {
                font-size: -icon-size(button-#{$key});
            }

            .fine-button__text {
                font-size: -text-size(button-#{$key});
            }
        }
    }

    &--round {
        border-radius: 999rpx;
    }

    &--block {
        width: 100%;
    }

    &--plain {
        background: -background(button-plain);

        @each $key in $colorTypes {
            &.fine-button--#{$key} {
                @if $key==default {

                    .fine-button__icon,
                    .fine-button__text {
                        color: -color(button-default-text);
                    }
                }

                @else {

                    .fine-button__icon,
                    .fine-button__text {
                        color: -color(button-#{$key});
                    }
                }
            }
        }
    }

    &--text {
        padding: 0;
        height: auto;
        border: hidden;
        line-height: 1;
        background-color: transparent;

        &.fine-button--active {
            opacity: -opacity(active);
            transition-duration: 0;

            &::before {
                content: none;
            }

            .fine-button__icon,
            .fine-button__text {
                transition-duration: 0;
            }
        }

        @each $key in $colorTypes {
            &.fine-button--#{$key} {
                @if $key==default {

                    .fine-button__icon,
                    .fine-button__text {
                        color: -color(button-default-text);
                    }
                }

                @else {

                    .fine-button__icon,
                    .fine-button__text {
                        color: -color(button-#{$key});
                    }
                }
            }
        }
    }

    &--active:not(.fine-button--text) {
        &::before {
            content: "";
            opacity: 0.1;
        }
    }

    &--disabled {
        cursor: not-allowed;
        opacity: -opacity(disabled);

        &::before {
            content: none;
        }
    }

    &--loading {
        .fine-button__icon {
            animation: rotate 2s linear infinite;

            @keyframes rotate {
                to {
                    transform: rotate(360deg);
                }
            }
        }

        &::before {
            content: none;
        }
    }
}