/**
 * Copyright Â© 2021 O2TI. All rights reserved.
 * @author  Bruno Elisei <brunoelisei@o2ti.com>
 * See LICENSE.txt for license details.
 */

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .field {
        &.theme-full-checkout-fields-floating-label {
            .field-tooltip {
                cursor: pointer;
                position: absolute;
                right: 0;
                top: 1px;

                &._active {
                    .lib-css(z-index, @theme-full-checkout-tooltip__hover__z-index);

                    .field-tooltip-content {
                        display: block;
                    }

                    .field-tooltip-action {
                        &::before {
                            .lib-css(color, @theme-full-checkout-tooltip-icon__hover__color);
                        }
                    }
                }

                .label {
                    .lib-visually-hidden();
                }

                .field-tooltip-action {
                    .lib-icon-font(@theme-full-checkout-tooltip-icon__content, @_icon-font-size: @theme-full-checkout-tooltip-icon__font-size, @_icon-font-text-hide: true, @_icon-font-color: @theme-full-checkout-tooltip-icon__color, @_icon-font-color-hover: @theme-full-checkout-tooltip-icon__hover__color, @_icon-font-color-active: false);

                    &::before {
                        padding-left: 1px;
                    }

                    &:focus {
                        ._keyfocus & {
                            .lib-css(z-index, @theme-full-checkout-tooltip__hover__z-index);

                            + .field-tooltip-content {
                                display: block;
                            }

                            &::before {
                                .lib-css(color, @theme-full-checkout-tooltip-icon__hover__color);
                            }
                        }
                    }
                }

                .field-tooltip-content {
                    .lib-css(background, @theme-full-checkout-tooltip-content__background-color);
                    .lib-css(border, @theme-full-checkout-tooltip-content__border-width solid @theme-full-checkout-tooltip-content__border-color);
                    .lib-css(border-radius, @theme-full-checkout-tooltip-content__border-width);
                    .lib-css(font-size, @theme-full-checkout-tooltip-content__font-size);
                    .lib-css(padding, @theme-full-checkout-tooltip-content__padding);
                    .lib-css(width, @theme-full-checkout-tooltip-content__width);

                    display: none;
                    left: 38px;
                    position: absolute;
                    text-transform: none;
                    top: -9px;
                    word-wrap: break-word;
                    z-index: 2;

                    &::before,
                    &::after {
                        .lib-arrow(
                            @_position: left,
                            @_size: @theme-full-checkout-tooltip-icon-arrow__font-size,
                            @_color: @theme-full-checkout-tooltip-content__background-color
                        );
                        .lib-css(left, @theme-full-checkout-tooltip-icon-arrow__left);
                        .lib-css(top, @theme-full-checkout-tooltip-content__padding);

                        content: '';
                        display: block;
                        position: absolute;
                        z-index: 3;
                    }

                    &::before {
                        .lib-css(border-right-color, @theme-full-checkout-tooltip-content__active__border-color);
                    }

                    &::after {
                        .lib-css(border-right-color, @theme-full-checkout-tooltip-content__background-color);

                        width: 1px;
                        z-index: 4;
                    }
                }
            }
        }
    }
}

//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
    .modal-popup {
        .field {
            &.theme-full-checkout-fields-floating-label {
                .field-tooltip {
                    .field-tooltip-content {
                        .lib-css(width, @theme-full-checkout-tooltip-content-mobile-popup__width);
                    }
                }
            }
        }
    }
}

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break >= @screen__m) {
    .field {
        &.theme-full-checkout-fields-floating-label {
            .field-tooltip {
                .field-tooltip-content {
                    .lib-css(right, @theme-full-checkout-tooltip-content-mobile__right);
                    .lib-css(top, @theme-full-checkout-tooltip-content-mobile__top);

                    left: auto;
                    &:extend(.abs-theme-full-checkout-tooltip-content-position-top-mobile all);
                }
            }
        }
    }
}

//
//  Tablet
//  _____________________________________________

@media only screen and (max-width: @screen__m) {
    .field {
        &.theme-full-checkout-fields-floating-label {
            .field-tooltip .field-tooltip-content {
                left: auto;
                right: -10px;
                top: 40px;
            }

            .field-tooltip .field-tooltip-content::before,
            .field-tooltip .field-tooltip-content::after {
                border: 10px solid transparent;
                height: 0;
                left: auto;
                margin-top: -21px;
                right: 10px;
                top: 0;
                width: 0;
            }

            .field-tooltip .field-tooltip-content::before {
                .lib-css(border-bottom-color, @theme-full-checkout-tooltip-content__border-color);
            }

            .field-tooltip .field-tooltip-content::after {
                .lib-css(border-bottom-color, @theme-full-checkout-tooltip-content__background-color);

                top: 1px;
            }
        }
    }
}
