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

.quantity {
    display: inline-flex;
    border: 1px solid rgba(var(--color-border), 1);
    border-radius: calc-rem(23px);
    align-items: center;

    input {
        width: calc-rem(30px);
        height: calc-rem(30px);
        border: 0;
        color: #000;
        background: #FFF;
        padding: 0;
        margin: 0;
        text-align: center;
        font-size: calc-rem(12px);

        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            appearance: none;
            margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
        }
    }

    button {
        margin: calc-rem(5px);
        width: calc-rem(20px);
        height: calc-rem(20px);
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        appearance: none;
        border: 1px solid rgba(var(--color-border), 1);
        border-radius: calc-rem(20px);
        transition: all .2s ease;

        svg path {
            transition: all .2s ease;
        }

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

            svg path {
                transition: all .2s ease;
                stroke: #FFF;
            }
        }
    }

    &--large {
        border-radius: calc-rem(25px);

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

        input {
            width: calc-rem(25px);
            height: calc-rem(25px);

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

        button {
            width: calc-rem(25px);
            height: calc-rem(25px);
            border-radius: calc-rem(25px);

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