@talentsoft-opensource/hylia/atoms/popover.less

The Hylia design systems. Contains all the building blocks style rules for Talentsoft.

.Hylia-a-popover {
    position: relative;
    display: inline-block;

    &__wrapper {
        pointer-events: none;
        transition: opacity .3s;
        z-index: 2;
        display: inline-block;
        position: absolute;
        padding: 1rem;
        filter: drop-shadow(0 0.6rem 0.6rem rgba(0,0,0,0.2));

        &__arrow {
            pointer-events: initial;
            content: " ";
            position: absolute;
            border-style: solid;
            border-width: 1rem;
        }

        &--bottom &__arrow {
            bottom: 100%;
            left: 50%;
            transform: translate(-1rem, 1rem);
            border-color: transparent transparent white transparent;
        }

        &--bottom--right &__arrow {
            left: 4rem;
        }

        &--bottom--left &__arrow {
            left: unset;
            right: 2rem;
        }

        &--bottom {
            top: 100%;
            left: 50%;
            transform: translate(-50%, 1rem);

            &--right {
                transform: translate(-4rem, 1rem);
            }

            &--left {
                left: unset;
                right: 50%;
                transform: translate(4rem, 1rem);
            }
        }

        &--top &__arrow {
            top: 100%;
            left: 50%;
            transform: translate(-1rem, -1rem);
            border-color: white transparent transparent transparent;
        }

        &--top--right &__arrow {
            left: 4rem;
        }

        &--top--left &__arrow {
            left: unset;
            right: 2rem;
        }

        &--top {
            bottom: 100%;
            left: 50%;
            transform: translate(-50%, -1rem);

            &--right {
                transform: translate(-4rem, -1rem);
            }

            &--left {
                left: unset;
                right: 50%;
                transform: translate(4rem, -1rem);
            }
        }

        &--left &__arrow {
            left: 100%;
            top: 50%;
            transform: translate(-1rem, -1rem);
            border-color: transparent transparent transparent white ;
        }

        &--left--bottom &__arrow {
            top: 4rem;
        }

        &--left--top &__arrow {
            top: unset;
            bottom: 2rem;
        }

        &--left {
            right: 100%;
            top: 50%;
            transform: translate(-1rem, -50%);

            &--bottom {
                transform: translate(-1rem, -4rem);
            }

            &--top {
                top: unset;
                bottom: 50%;
                transform: translate(-1rem, 4rem);
            }
        }

        &--right &__arrow {
            right: 100%;
            top: 50%;
            transform: translate(+1rem, -1rem);
            border-color: transparent white transparent transparent  ;
        }

        &--right--bottom &__arrow {
            top: 4rem;
        }

        &--right--top &__arrow {
            top: unset;
            bottom: 2rem;
        }

        &--right {
            left: 100%;
            top: 50%;
            transform: translate(+1rem, -50%);

            &--bottom {
                transform: translate(+1rem, -4rem);
            }

            &--top {
                top: unset;
                bottom: 50%;
                transform: translate(+1rem, 4rem);
            }
        }
    }

    &__container {
        pointer-events: initial;
        min-width: 6rem;
        max-width: 40rem;
        background-color: white; // change to @white
        padding: @gutter;
        border-radius: 0.4rem;
    }

    &__content {
        width: max-content;
        min-width: 4rem;
        max-width: 36rem;
        overflow: auto;
    }
}