@mixin input-active {
    border-color: $ibexa-color-primary;
    box-shadow: 0 0 calculateRem(2px) 0 rgba($ibexa-color-primary, 0.75);
}

@mixin input-invalid {
    background: $ibexa-white;
    border-width: calculateRem(1px) calculateRem(1px) calculateRem(1px) calculateRem(3px);
    border-color: $ibexa-color-base-dark $ibexa-color-base-dark $ibexa-color-base-dark $ibexa-color-danger;
}

@mixin area-invalid {
    border-left: calculateRem(3px) solid $ibexa-color-danger;
}

@mixin error-input {
    display: flex;
    font-size: calculateRem(14px);
    font-style: normal;
    color: $ibexa-color-danger;
    align-items: center;
    box-sizing: border-box;

    &:before {
        content: '!';
        font-size: calculateRem(12px);
        display: flex;
        width: calculateRem(14px);
        height: calculateRem(14px);
        color: $ibexa-white;
        background: $ibexa-color-danger;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        margin-right: calculateRem(5px);
    }
}

@mixin error-under-input {
    @include error-input();

    margin: calculateRem(-7px) 0 0 calculateRem(2px);
}

@mixin error-under-label {
    @include error-input();

    flex-basis: 100%;
    margin: 0 0 calculateRem(10px) calculateRem(2px);
}

@mixin radio-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    display: inline-block;
    width: calculateRem(16px);
    height: calculateRem(16px);
    background-color: $ibexa-white;
    border-radius: calculateRem(16px);
    border: calculateRem(1px) solid $ibexa-color-base-dark;
    outline: none;

    &:active {
        @include input-active;
    }

    &:checked {
        border: calculateRem(1px) solid $ibexa-color-primary;
        box-shadow: inset 0 0 0 calculateRem(4px) $ibexa-color-primary;
    }
}
