.neu-button {
    width: fit-content;
    padding: 15px 20px;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    border: none;
}

.neu-button:enabled {
    cursor: pointer;
}

.neu-button:focus {
    outline: none;
}

.neu-button:enabled:hover {
    background-image: linear-gradient(135deg, hsl(231, 16%, 89%) -50%, hsl(225, 18%, 94%) 120%);
}

.neu-button span {
    width: 100%;
}

:host ::ng-deep .neu-button span i {
    margin: 0 10px;
}

/* color */
.neu-button.color-primary {
    background-image: linear-gradient(135deg, #8B278F -50%, #BD34C2 120%);
    box-shadow: unset;
}

.neu-button.color-primary span,
.neu-button.color-secondary span {
    color: #F8F8FC;
}

.neu-button.color-primary::before,
.neu-button.color-secondary::before {
    content: unset;
}

.neu-button.color-primary:enabled:hover,
.neu-button.color-primary:enabled:active {
    background-image: linear-gradient(135deg, hsl(298, 57%, 33%) -50%, hsl(298, 58%, 45%) 120%);
}

.neu-button.color-secondary {
    background-image: linear-gradient(135deg, #2D3891 -50%, hsl(233, 53%, 52%) 120%);
}

.neu-button.color-secondary:enabled:hover {
    background-image: linear-gradient(135deg, hsl(233, 53%, 32%) -50%, hsl(233, 53%, 47%) 120%);
}

.neu-button.color-secondary:enabled:active {
    background-image: linear-gradient(135deg, hsl(233, 53%, 27%) -50%, hsl(233, 53%, 42%) 120%);
}

/* shapes */
.neu-button.shape-round,
.neu-button.shape-round::before {
    border-radius: 50px;
}

.neu-button.shape-circle,
.neu-button.shape-circle::before {
    border-radius: 100%;
}

.neu-button.shape-circle {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

:host ::ng-deep .neu-button.shape-circle span i {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* size */
.neu-button.size-small {
    padding: 10px 20px;
}

.neu-button.full-width {
    display: block;
    text-align: center;
    width: 100%;
}