/* Error styles */
.smart-validation-error,
.smart-validation-error input,
.smart-validation-error span {
    border-color: var(--smart-error) !important;
    outline: none;
}

input[type='checkbox'].smart-validation-error, /* input checkbox */
input[type='radio'].smart-validation-error { /* input radio */
    outline: auto;
    outline-color: var(--smart-error);
}


.smart-error-label-like-after-element::after,
.smart-validation-error:not(smart-check-box) > div.smart-container::after,
.smart-success-label-like-after-element::after,
.smart-validation-success:not(smart-check-box) > div.smart-container::after {
    pointer-events: none;
    font-weight: bold;
    font-family: var(--smart-font-family);
    font-size: var(--smart-font-size);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.smart-validation-error input::selection,
.smart-validation-error input.smart-input::selection {
    background: var(--smart-error);
    color: var(--smart-error-color);
    border-color: var(--smart-error);
}

.smart-validation-success input::selection,
.smart-validation-success input.smart-input::selection {
    background: var(--smart-success);
    color: var(--smart-success-color);
    border-color: var(--smart-success);
}


.smart-success-label-like-after-element::after,
.smart-error-label-like-after-element::after {
    display: flex;
    top: 50%;
    position: absolute;
    left: calc(50% + 15px);
    transform: translate(-50%,-50%);
    justify-content: center;
    align-items: center;
}

.smart-error-label-like-after-element::after,
.smart-validation-error:not(smart-check-box) > div.smart-container::after {
    background-color: var(--smart-error);
    color: var(--smart-error-color);
    content: '!';
}

.smart-error-label-like-after-element {
    position: relative;
}

.smart-validation-error:not(smart-check-box) > div.smart-container::after {
    position: absolute;
    top: 50%;
    left: calc(100% + 20px);
    transform: translate(-50%, -50%);
}

input.smart-validation-error,
input.smart-validation-success {
    border-style: solid;
    border-width: 1px;
}

/* Success styles */
.smart-validation-success,
.smart-validation-success input,
.smart-validation-success span {
    border-color: var(--smart-success) !important;
    outline: none;
}

    .smart-success-label-like-after-element::after,
    .smart-validation-success:not(smart-check-box) > div.smart-container::after {
        background-color: var(--smart-success);
        color: var(--smart-success-color);
        content: '✓';
    }

    .smart-validation-success:not(smart-check-box) > div.smart-container::after {
        position: absolute;
        top: 50%;
        left: calc(100% + 20px);
        transform: translate(-50%, -50%);
    }

.smart-success-label-like-after-element {
    position: relative;
}

/* Spans in the bottom of the body - shown on input click */
.smart-error-holder {
    position: absolute;
    font-size: var(--smart-font-size);
    background-color: var(--smart-error);
    color: var(--smart-error-color);
    padding: 10px;
    pointer-events: none;
    z-index: var(--smart-editor-drop-down-z-index);
    margin-top: 10px;
}