:root {
    --text-base: 1rem; /* 16px */
    --text-md: 1.125rem; /* 18px */
    --text-lg: 1.25rem;  /* 20px */
    --color-body: #f7f7f7;
    --color-white: #fff;
    --color-green: #2F9600;
    --color-black: #212121;
    --color-gray: #e6e6e6;
    --color-gray-footer: #999999;
    --color-dark-gray: #8E8E8E;
    --color-orange: #FF8205;
    --color-gray-60: color-mix(in oklab, var(--color-gray) 60%, #fff);
    --bg-color: #f7f7f7;
    --color-black-25: color-mix(in oklab, var(--color-black) 25%, transparent 100%);
}
button {
    cursor: pointer;
    background-color: transparent;
    border: none;
    transition: all .2s linear;
}




.btn {
    display: inline-flex;
    border-radius: 3em;
    line-height: 1;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all .2s linear;
    text-align: center;
    &:disabled {
        cursor: not-allowed;
        filter: brightness(.8);
    }

    &.btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: .75rem 1rem;
        background-color: var(--blue);
        color: white;
        border-radius: 3rem;
        white-space: nowrap;
        &:hover {
            background-color: color-mix(in oklab, var(--blue) 90%, #000);
        }
    }
    svg {
        width: 1ch;
    }

    /* Colors */
    &.primary {
        --btn-bg: var(--blue);
        --btn-text: var(--color-white);
    }
    &.success {
        --btn-bg: var(--color-green);
        --btn-text: var(--color-white);
    }
    &.warning {
        --btn-bg: var(--color-orange);
        --btn-text: var(--color-white);
    }
    &.danger {
        --btn-bg: var(--color-orange);
        --btn-text: var(--color-white);
    }
    &.color-text {
        --btn-bg: var(--color-black);
        --btn-text: var(--color-white);
    }

    &.color-sub {
        --btn-bg: var(--color-dark-gray);
        --btn-text: var(--color-black);
    }

    &.block {
        --btn-bg: var(--color-gray-60);
        --btn-text: var(--color-black);
    }

    /* Styling */
    &.solid {
        background-color: var(--btn-bg);
        color: var(--btn-text);
        box-shadow: inset 0 0 0 calc(1px) var(--btn-bg, currentcolor);
        &:hover:not(:disabled) {
            background-color: color-mix(in oklab, var(--btn-bg) 90%, #000);
        }
    }
    &.outlined {
        background-color: transparent;
        color: var(--btn-bg);
        box-shadow: inset 0 0 0 calc(1px) var(--btn-bg, currentcolor);
        &:hover:not(:disabled) {
            color: var(--btn-text);
            background-color: color-mix(in oklab, var(--btn-bg) 90%, #000);
        }
    }
    &.filled {
        background-color: color-mix(in oklab, var(--btn-bg) 10%, transparent);
        color: var(--btn-bg);
        box-shadow: inset 0 0 0 calc(1px) color-mix(in oklab, var(--btn-bg) 10%, transparent);
        &:hover:not(:disabled) {
            background-color: color-mix(in oklab, var(--btn-bg) 20%, transparent);
        }
    }
    &.text {
        background-color: transparent;
        color: var(--btn-bg);
        &:hover:not(:disabled) {
            color: color-mix(in oklab, var(--btn-bg) 80%, #000);
        }
    }
    &.link {
        background-color: transparent;
        color: var(--btn-bg);
    }

    /* sizes */
    &.md { padding: .75rem 2ch; }
}



.swiper-button-prev, .swiper-button-next {
    margin-left: unset;
    color: var(--color-black);
    padding: .9rem;
    background: var(--color-gray-60);
    border-radius: 6em;
    transition: all .2s linear;
    transform-origin: center;
    &:hover {
        background: var(--color-gray);
        color: var(--blue);
    }
}
.swiper-button-prev {
    transform: rotateZ(90deg);
}
.swiper-button-next {
    transform: rotateZ(-90deg);
}