.btn {
    display: inline-block;
    border: 2px solid transparent;
    font-family: "Roboto";
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    transition: background-color .2s ease-in-out,
                padding .2s ease-in-out,
                margin .2s ease-in-out;

    &:hover,
    &:focus {
        text-decoration: none;
        color: #fff;
        outline: none;
    }
}

/*sizes*/
.btn--small {
    padding: 0 20px;
    line-height: 36px;

}

.btn--medium {
    padding: 0 35px;
    font-size: 16px;
    line-height: 46px;

}

/*colors*/
.btn--red {
    background-color: var(--brand-red);

    &:hover,
    &:focus {
        background-color: var(--brand-red);
    }
}

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

.btn--secondary {
    background-color: var(--secondary-button-color);
    &:hover,
    &:focus {
        background-color: var(--secondary-button-color-hover);
    }
}

.btn--tertiary {
    background-color: var(--tertiary-button-color);
    &:hover,
    &:focus {
        background-color: var(--tertiary-button-color-hover);
    }
}

.btn--green {
    background-color: var(--brand-green);

    &:hover,
    &:focus {
        background-color: var(--brand-green);
    }
}

.btn--grey {
    background-color: var(--brand-grey-dark);

    &:hover,
    &:focus {
        background-color: var(--brand-grey-dark);
    }

}

.btn--white {
    background-color: #fff;
    color: var(--brand-grey-dark);

    &:hover,
    &:focus {
        background-color: darken(#fff, 10%);
        color: var(--brand-grey-dark);
    }

}

.btn--transparent-white {
    border-color: #fff;
}