.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 9999px;
    transition: var(--transition-bg);
    box-shadow: 0px 0px 4px rgba(18, 18, 18, 0.15);

    /* hover colors */
    --color-hover-dark-green: #056232;
    --color-hover-medium-green: #5a9483;
    --color-hover-dark-blue: #2479a7;
    --color-hover-medium-blue: #87b8d2;
    --color-hover-medium-green: #87b8d2;
}

/* Sizing */
.small {
    font-size: 12px;
    padding: 6px;
}
.medium {
    font-size: 14px;
    padding: 8px;
}

@media screen and (min-width: 758px) {
    .small {
        font-size: 12px;
        padding: 8px;
    }
    .medium {
        font-size: 16px;
        padding: 12px;
    }
}

/* Variants filled */
.filled-dark-green {
    background: var(--color-dark-green);
    color: white;
}
.filled-dark-green:hover {
    background: var(--color-hover-dark-green);
}
.filled-medium-green {
    background: var(--color-medium-green);
    color: white;
}
.filled-medium-green:hover {
    background: var(--color-hover-medium-green);
}
.filled-dark-blue {
    background: var(--color-dark-blue);
    color: white;
}
.filled-dark-blue:hover {
    background: var(--color-hover-dark-blue);
}
.filled-medium-blue {
    background: var(--color-medium-blue);
    color: white;
}
.filled-medium-blue:hover {
    background: var(--color-hover-medium-blue);
}
.filled-red {
    background: var(--color-error-red);
    color: white;
}
.filled-red:hover {
    background: var(--color-error-red-2);
}
.filled-yellow-warning {
    background: var(--color-yellow-warning);
    color: white;
}
.filled-yellow-warning:hover {
    background: var(--color-yellow-warning-2);
}

/* Variants outlined */
.outlined-dark-green {
    border-width: 1px;
    border-color: var(--color-dark-green);
    color: var(--color-dark-green);
}
.outlined-dark-green:hover {
    background: var(--color-dark-green);
    color: white;
}
.outlined-medium-green {
    border-width: 1px;
    border-color: var(--color-medium-green);
    color: var(--color-medium-green);
}
.outlined-medium-green:hover {
    background: var(--color-medium-green);
    color: white;
}
.outlined-dark-blue {
    border-width: 1px;
    border-color: var(--color-dark-blue);
    color: var(--color-dark-blue);
}
.outlined-dark-blue:hover {
    background: var(--color-dark-blue);
    color: white;
}
.outlined-medium-blue {
    border-width: 1px;
    border-color: var(--color-medium-blue);
    color: var(--color-medium-blue);
}
.outlined-medium-blue:hover {
    background: var(--color-medium-blue);
    color: white;
}
.outlined-red {
    border-width: 1px;
    border-color: var(--color-error-red);
    color: var(--color-error-red);
}
.outlined-red:hover {
    background: var(--color-error-red);
    color: white;
}
.outlined-yellow-warning {
    border-width: 1px;
    border-color: var(--color-yellow-warning);
    color: var(--color-yellow-warning);
}
.outlined-yellow-warning:hover {
    background: var(--color-yellow-warning);
    color: white;
}

.btn:disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
}