@use "../common/utils" as *;
@use "../common/mixins" as *;

.button {
    position: relative;
    display: inline-flex;
    padding: calc-rem(11.5px 40px 11.5px 25px);
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-medium);
    line-height: 1;
    font-size: clamp-font(12px, 14px);
    cursor: pointer;

    @include media-breakpoint-up(lg) {
        padding: calc-rem(16.5px 65px 16.5px 25px);
    }

    &[disabled] {
        cursor: not-allowed;
        opacity: .5;
    }

    &--primary {
        border-radius: calc-rem(25px);
        background-color: rgba(var(--color-primary), 1);
        color: #FFF;
        transition: all .2s ease;

        &:after {
            content: '';
            position: absolute;
            background: #FFF url('../images/icons/icon-arrow-right.svg') no-repeat center center;
            width: calc-rem(25px);
            height: calc-rem(25px);
            border-radius: calc-rem(25px);
            top: 5px;
            right: 5px;

            @include media-breakpoint-up(lg) {
                width: calc-rem(35px);
                height: calc-rem(35px);
                border-radius: calc-rem(35px);
            }
        }

        &:hover {
            background-color: rgba(var(--color-primary), .8);
            transition: all .2s ease;
        }
    }

    &--secondary {
        border-radius: calc-rem(25px);
        background-color: rgba(var(--color-secondary), 1);
        color: #FFF;
        transition: all .2s ease;

        &:after {
            content: '';
            position: absolute;
            background: #FFF url('../images/icons/icon-arrow-right.svg') no-repeat center center;
            width: calc-rem(25px);
            height: calc-rem(25px);
            border-radius: calc-rem(25px);
            top: 5px;
            right: 5px;

            @include media-breakpoint-up(lg) {
                width: calc-rem(35px);
                height: calc-rem(35px);
                border-radius: calc-rem(35px);
            }
        }

        &:hover {
            background-color: rgba(var(--color-secondary), .8);
            transition: all .2s ease;
        }
    }

    &--tertiary {
        border-radius: calc-rem(25px);
        background-color: rgba(var(--color-white), 1);
        color: rgba(var(--color-secondary));
        transition: all .2s ease;

        &:after {
            content: '';
            position: absolute;
            background: rgba(var(--color-background)) url('../images/icons/icon-arrow-right.svg') no-repeat center center;
            width: calc-rem(25px);
            height: calc-rem(25px);
            border-radius: calc-rem(25px);
            top: 5px;
            right: 5px;

            @include media-breakpoint-up(lg) {
                width: calc-rem(35px);
                height: calc-rem(35px);
                border-radius: calc-rem(35px);
            }
        }

        &:hover {
            background-color: rgba(var(--color-primary));
            transition: all .2s ease;
            color: rgba(var(--color-white));

            &:after{
                background: #FFF url('../images/icons/icon-arrow-right.svg') no-repeat center center;
            }
        }
    }

    &--danger {
        border-radius: calc-rem(25px);
        background-color: rgba(var(--color-danger), 1);
        color: #FFF;
        transition: all .2s ease;

        &:after {
            content: '';
            position: absolute;
            background: #FFF url('../images/icons/icon-arrow-right.svg') no-repeat center center;
            width: calc-rem(25px);
            height: calc-rem(25px);
            border-radius: calc-rem(25px);
            top: 5px;
            right: 5px;

            @include media-breakpoint-up(lg) {
                width: calc-rem(35px);
                height: calc-rem(35px);
                border-radius: calc-rem(35px);
            }
        }

        &:hover {
            background-color: rgba(var(--color-danger), .8);
            transition: all .2s ease;
        }
    }

    &--arrow {
        font-size: clamp-font(12px, 14px);
        display: flex;
        align-items: center;
        white-space: nowrap;
        width: fit-content;

        svg {
            flex: none;
            margin-left: calc-rem(5px);
            transition: .24s ease;
        }

        &:hover {
            svg {
                transform: translateX(calc-rem(3px));
            }
        }
    }

    &--arrow-back {
        font-size: clamp-font(12px, 12px);
        display: flex;
        align-items: center;
        white-space: nowrap;
        width: fit-content;

        svg {
            flex: none;
            margin-right: calc-rem(5px);
            transition: .24s ease;
        }

        &:hover {
            svg {
                transform: translateX(calc-rem(-3px));
            }
        }
    }

    &--link {
        text-decoration: underline;
    }

    &--full-width {
        width: 100%;
    }

}
