/* Remove bootstrap styling */
button {
    border: unset;
}

/* Base button styling */
.button {
    display: flex;
    width: 100%;
    padding: var( --spacing-10) var( --spacing-15);
    justify-content: center;
    align-items: center;
    gap: var( --spacing-10);
    border-radius: var( --spacing-14);
    text-wrap: wrap;
}

.icon-far {
    display: flex;
    justify-content: center;
    flex: 1;
}

/* Button sizes */
.button-medium {
    /* Font */
    font-family: Montserrat;
    font-size: 13px;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    /* Button */
    height: 45px;
}

/* Button color variations */
.button-primary {
    background: var(--colour-primary-red);
    color: var(--colour-white);
    font-weight: var(--font-weight-800);
}

.button-secondary {
    background: var(--colour-grey);
    color: var(--colour-white);
    font-weight: var(--font-weight-800);
}

/* Hover states */
.button-primary:hover {
    background-color: var(--colour-red-shade);
    color: var(--colour-white);
}

.button-secondary:hover {
    background-color: var(--colour-grey-tint-1);
    color: var(--colour-white);
}

/* Outline styles */
.button-outline-primary {
    background-color: transparent;
    color: var(--colour-primary-red);
    border: 2px solid var(--colour-primary-red);
    font-weight: var(--font-weight-600);
}

.button-outline-secondary {
    background-color: transparent;
    color: var(--colour-grey);
    border: var(--spacing-2) solid var(--colour-grey);
    font-weight: var(--font-weight-600);
}

/* Hover state for outline buttons */
.button-outline-primary:hover {
    outline: var(--spacing-2) solid var(--colour-primary-red);
    color: var(--colour-primary-red);
}

.button-outline-secondary:hover {
    outline: var(--spacing-2) solid var(--colour-grey);
    color: var(--colour-grey);
}