@use "../theme/colors" as *;
@use "../theme/breakpoints" as breakpoints;

.btn-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.btn {
    background: transparent linear-gradient(270deg, $main-color 0%, $main-color 100%) 0 0 no-repeat padding-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    border-radius: 25px;
    color: #fff;
    padding: 0.8rem 1rem;
    cursor: pointer;
    position: relative;
    min-width: 150px;

    &:hover {
        opacity: 0.8;
    }

    &.outlined {
        background: transparent;
        border: 2px solid white;

        &:hover {
            background: white;
            color: black !important;
            opacity: unset;

            * {
                color: black !important;
                border-color: black !important;
            }
        }
    }

    &.secondary {
        background: $linear-light-two;
    }

    &:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }

    &.small {
        min-width: unset;
        padding: 0.5rem 1rem;
    }

    &.big {
        padding: 1rem 2rem;
    }

    &.gradient {
        background: transparent linear-gradient(270deg, $linear-light-two 0, $linear-light-one 100%) 0 0 no-repeat padding-box;
    }
}

.btn-back {
    background: transparent;
    border: 1px solid $linear-light-two;

    &:hover {
        background: $linear-light-two;
        color: white;
        opacity: unset;
    }
}

.icon-btn {
    .btn {
        min-width: unset;
        width: 100%;
        max-height: 140px;
        aspect-ratio: 1;
        background: transparent linear-gradient(0, white 0, $linear-light-two 80%) 0 0 no-repeat padding-box;
        position: relative;
        font-size: 0.9rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: end;

        img {
            position: absolute;
            top: 1rem;
            margin: auto;
            height: 40%;
            width: auto;
            z-index: 0;
        }

        span {
            color: black !important;
            z-index: 1;
        }
    }
}