.btn {
    border: 1px solid rgb(156 163 175);
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    display: inline-block;
    cursor: pointer;

    &:hover {
        background-color: rgb(243 244 246);
        color: rgb(31, 41, 55);
    }

    &.btn--small {
        font-size: 0.875rem;
        font-weight: 600;
        padding-top: 0.125rem;
        padding-bottom: 0.125rem;
    }

    & .btn__text {
        line-height: 1.25rem;
    }

    &.btn--with-icon i {
        margin-right: 0.25rem;
    }

    &.btn--danger [data-icon] {
        color: rgb(220 38 38);
    }

    &.btn--primary {
        background-color: var(--color-primary);
        color: white;
        font-weight: bold;
        cursor: pointer;
    }

    &.btn--primary:hover {
        background-color: var(--color-primary-hover);
        color: white;
    }

    &.btn--secondary {
        background-color: var(--color-bg--brand-secondary);
        color: var(--color-txt--brand-secondary);
        border-color: transparent;
    }

    &.btn--secondary:hover {
        background-color: var(--color-bg--brand-secondary-hover) !important;
        color: var(--color-txt--brand-secondary-hover) !important;
    }

    &.btn--rounded {
        border-radius: 1rem;
    }
}

.dark .btn {
    border-color: white;
}

.dark .btn:hover {
    background-color: rgb(243 244 246);

    &.btn--primary:hover {
        background-color: var(--color-primary-hover);
    }
}