@import "src/variables";

%primary-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    color: $primary-color;
    background: $primary-color-translucent;
    border-radius: 200px;
    min-height: $button-height;
    height: $button-height;
    font-weight: $semi-bold;
    padding: 0 16px;
    white-space: nowrap;
    font-size: 1rem;

    &[disabled] {
        background: $disabled-background-color;
        color: $disabled-color;
    }
}

%primary-tag {
    @extend %primary-button;
    border-radius: 4px;
    background: $primary-color;
    color: #fff;
    min-height: 28px;
    height: 28px;
    text-transform: uppercase;
    padding: 0 8px;
    font-size: 12px;
    font-weight: $bold;
    letter-spacing: 0.5px;
}

%primary-select {
    @extend %primary-button;
    background: $grey-color-translucent;
    color: $font-color-primary;
    fill: $font-color-primary;
    font-weight: $normal;
    border-radius: $border-radius;
    padding: 0 12px;

    > select {
        height: 100%;
        width: 100%;
        background: none;
        border: none;
    }
}
