/* Css for button component */
/* Default button style */
.button {
    background-color: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: 999px;
    padding: 0.6rem 1rem;
    font-family: var(--font-main);
    font-size: 0.95rem;
    text-decoration: none;
    gap: 0.5rem;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.button:hover {
    background-color: var(--color-grey-dark);
}

/* modifiers */
.button--primary {
    background-color: var(--color-purple-blue);
    color: var(--color-black);
}

.button--primary:hover {
    background-color: color-mix(in srgb, var(--color-purple-blue) 80%, white);
}

.button--white {
    background-color: var(--color-white);
    color: var(--color-black);
}

.button--secondary {
    background-color: var(--color-white);
    color: var(--color-black);
}

.button--secondary:hover {
    background-color: var(--color-white);
}

/* Button text */
.button__text {
    font-weight: 400;
    font-size: 1rem;
    line-height: 140%;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon for black */
.button--black .button__icon {
    filter: brightness(0) invert(1);
    width: 17px;
    height: 17px;
}

/* Icon for white, primary and secondary */
.button--white .button__icon,
.button--primary .button__icon,
.button--secondary .button__icon {
    filter: none;
    width: 1.5rem;
    height: 1.5rem;
}

.button--secondary .button__icon:hover {
    filter: brightness(0.5) invert(0.2);
}