@use 'colors' as *;

.button {
    width: 285px;
    height: 60px;

    font-size: 14px;
    letter-spacing: 0.22px;
    line-height: 16px;
    text-transform: uppercase;

    display: block;
    margin: auto;
    color: white;

    border-radius: 64px;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;

    box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.07);
}

.button-red {
    @extend .button;

    margin-top: 30px;
    background-color: $pink-bg;
    border-color: white;
}

.button-icon {
    cursor: pointer;

    background-color: transparent;
    border-width: 0px;
}

$button-border-color: rgba(255, 255, 255, 0.1);

.button-dark {
    @extend .button;

    margin-top: 10px;
    background-color: $event-bg;
    border-color: $button-border-color;
}

.button-white {
    @extend .button;

    margin-top: 10px;
    background-color: white;
    color: $pink-button;
    border-color: $button-border-color;
}

.button-blue {
    @extend .button;

    margin-top: 10px;
    background-color: $col-button-blue;
    color: $pink-button;
    border-color: $button-border-color;
}

.upgrade-button {
    @extend .button;

    background-color: $event-bg;
}
