@import '../../../common/styles/_abstract-icon';
@import '../../../common/styles/colors';
@import '../../../common/styles/drop';
@import '../../../common/styles/rounded-corner-base';

@bloko-drop-info-inline-background: @color-blue-10;
@bloko-drop-info-inline-no-indent-with-pointer-padding-top: 12px;

.bloko-info-inline {
    padding-top: @bloko-drop-padding-top;
    padding-bottom: @bloko-drop-padding-bottom;
    position: relative;
}

.bloko-info-inline_no-indent {
    padding-top: 0;
    padding-bottom: 0;
}

.bloko-info-inline_with-pointer {
    &::before {
        content: '';
        background-color: @bloko-drop-info-inline-background;
        transform: rotate(45deg);
        width: 16px;
        height: 16px;
        top: 8px;
        left: 19px;
        position: absolute;
    }
}

.bloko-info-inline_no-indent.bloko-info-inline_with-pointer {
    padding-top: @bloko-drop-info-inline-no-indent-with-pointer-padding-top;

    &::before {
        top: 4px;
    }
}

.bloko-info-inline__content {
    background-color: @bloko-drop-info-inline-background;
    border-radius: @rounded-corner-default;
    padding: 15px 40px 15px 20px;
    position: relative;
}

.bloko-info-inline__content_without-close {
    padding: 15px 20px;
}

.bloko-info-inline__close {
    position: absolute;
    top: 14px;
    right: 14px;
}