.indi-button {
    background-color: var(--indi-primary-colour);
    color: var(--indi-white);
    border: 1px solid var(--indi-primary-colour);
    border-radius: 4px;
    padding: 4px 8px;
    align-items: center;
    transition: all 0.2s ease-in-out;
}

.indi-button-no-fill {
    background: none;
    align-items: center;
    border-style: none;
    padding: 0;
}
.indi-button-no-fill:hover {
    color: var(--indi-primary-colour);
}
.indi-button-no-fill:focus {
    outline-style: none;
}

.indi-button:hover:not(:disabled) {
    background-color: var(--indi-primary-light);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.indi-button:active:not(:disabled),
.indi-button.pressed {
    background-color: var(--indi-white);
    color: var(--indi-primary-colour);
    border-color: var(--indi-primary-colour);
    box-shadow: none;
}

.indi-button:focus {
    outline: none;
    box-shadow: none;
}

.indi-button:disabled {
    background-color: var(--indi-grey);
    color: var(--indi-white);
    border-color: var(--indi-grey);
    cursor: not-allowed;
    opacity: 0.7;
}