@import '../../../sass/colors';

@mixin button-common {
    &.md {
        padding: 0.625rem 1.25rem;
        font-size: 1.125rem;
        border-radius: 0.75rem;
    }
    &.sm {
        padding: 0.375rem 0.625rem;
        font-size: 0.875rem;
        border-radius: 0.625rem;
    }
    &.lg {
        padding: 0.625rem 1.5rem;
        font-size: 1.375rem;
        border-radius: 0.875rem;
    }
    &.tiny {
        font-size: 0.875rem;
        border-radius: 0.625rem;
        padding: 0.125rem 0.25rem;
    }
    border: 2px solid;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        color 0.3s ease;
    cursor: pointer;

    &:active {
        transform: scale(0.95);
    }
}

.button-solid-primary {
    @include button-common;
    background-color: $color-primary-500;
    border-color: $color-primary-500;
    color: $color-primary-50;

    &:hover {
        border-color: $color-primary-400;
        background-color: $color-primary-400;
    }
}

.button-light-primary {
    @include button-common;
    background-color: rgba($color-primary-100, 0);
    border-color: rgba($color-primary-100, 0);
    color: $color-primary-500;

    &:hover {
        border-color: $color-primary-100;
        background-color: $color-primary-100;
    }

    &.dark-mode {
        &:hover {
            border-color: $color-primary-700;
            background-color: $color-primary-700;
        }
    }
}

.button-outline-primary {
    @include button-common;
    background-color: rgba($color-primary-50, 0);
    border-color: $color-primary-500;
    color: $color-primary-500;

    &:hover {
        border-color: $color-primary-300;
        color: $color-primary-300;
    }

    &.dark-mode {
        &:hover {
            border-color: $color-primary-700;
            color: $color-primary-700;
        }
    }
}

.button-flat-primary {
    @include button-common;
    background-color: $color-primary-100;
    border-color: $color-primary-100;
    color: $color-primary-500;

    &:hover {
        color: $color-primary-400;
        background-color: lighten($color-primary-100, 5%);
        border-color: lighten($color-primary-100, 5%);
    }

    &.dark-mode {
        background-color: $color-primary-700;
        color: $color-primary-50;
        border-color: $color-primary-700;

        &:hover {
            background-color: $color-primary-600;
            border-color: $color-primary-600;
        }
    }
}

.button-ghost-primary {
    @include button-common;
    background-color: rgba($color-primary-500, 0);
    border-color: $color-primary-500;
    color: $color-primary-500;

    &:hover {
        color: $color-primary-50;
        background-color: $color-primary-500;
    }
}

.button-glow-primary {
    @include button-common;
    background-color: $color-primary-500;
    border-color: $color-primary-500;
    color: $color-primary-50;
    box-shadow: 0 0.125rem 1rem rgba($color-primary-500, 0.6);

    &:hover {
        border-color: $color-primary-400;
        background-color: $color-primary-400;
    }
}

.button-disabled {
    cursor: not-allowed;
    position: relative;
    pointer-events: none;

    &::after {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: 0;
        bottom: 0;
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        background-color: rgba($color-slate-50, 0.5);
        border-radius: 0.75rem;
    }

    &.dark-mode {
        &::after {
            background-color: rgba($color-slate-900, 0.5);
        }
    }
}