@import '../styles/_variables.scss';

.main {
    .error-label {
        font-size: 13px;
        background-color: $pink-background;
        padding-block-start: 7px;
        padding-inline-end: 10px;
        padding-block-end: 7px;
        padding-inline-start: 10px;
        z-index: 200;
        box-shadow: $tooltips-box-shadow;
        border-radius: $default-border-radius;
        border: $default-border;
        border-color: $pink-stroke;
        display: inline-block;

        &.icon-on-the-left {
            padding-block-start: 7px;
            padding-inline-end: 10px;
            padding-block-end: 7px;
            padding-inline-start: 15px;
        }

        .icon-wrapper {
            background-color: $pink-background;
            width: 18px;
            height: 10px;
            border: $default-border;
            border-color: $pink-stroke;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 4px 1px 4px -4px rgba(64, 65, 71, 0.4);
            position: absolute;
            top: -11px;
            left: 7px;
            border-radius: 100px 100px 0 0;
            border-bottom: 0;

            .icon {
                justify-content: center;
                height: 100%;
                margin-block-start: 8px;
            }

            &.icon-on-the-left {
                top: 7px;
                left: -9px;
            }

            [dir='rtl'] & {
                left: auto;
                right: 7px;
            }
        }
    }

    &.float {
        position: absolute;
        top: 30px;
        left: 0;
        z-index: 1;

        [dir='rtl'] & {
            right: 0;
            left: auto;
        }
    }

    &.block {
        margin-block-start: 20px;
        position: relative;

        .icon-wrapper {
            width: 10px;
            height: 18px;
            box-shadow: none;
            top: 50%;
            left: -11px;
            border-radius: 100px 0 0 100px;
            border-right: 0;
            border-bottom: $default-border;
            transform: translate(0, -50%);

            .icon {
                margin-inline-start: 8px;
                margin-block-start: 0;
            }
        }
    }

    &.mobile {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1;
        width: 100%;

        label {
            width: 100%;
        }
    }

    &.bottom {
        &.float {
            top: initial;
            bottom: 0;
        }
    }

    &.right {
        &.float {
            left: initial;
            right: 0;

            .icon-wrapper {
                right: 7px;
                left: initial;
            }
        }
    }
}