.pop-over-container {
    position: relative;
    overflow: hidden;

    &.open {
        overflow: visible;
        .pop-over-content {
            animation-name: popovers-in-transition;
            animation-duration: 0.2s;
            animation-timing-function: ease-in;
            animation-delay: 0s;
            animation-fill-mode: forwards;
        }
    }

    .pop-over-content {
        opacity: 0;
        animation-name: popovers-out-transition;
        animation-duration: 0.2s;
        animation-timing-function: ease-in;
        animation-delay: 0s;
        animation-fill-mode: backwards;
        background: $color-snow;
        position: absolute;
        border-top-left-radius: 0.3rem;
        border-top-right-radius: 0.3rem;
        box-shadow: 0 0 1rem -0.4rem $color-black;

        &.to-left {
            top: 0;
            right: 5rem;
            .pop-over-header:before {
                left: inherit;
                right: -0.7rem;
                @include triangle(1.4rem, $color-featured, right);
            }
        }

        &.to-right {
            top: 0;
            left: 5rem;
            .pop-over-header:before {
                right: inherit;
                left: -0.7rem;
                @include triangle(1.4rem, $color-featured, left);
            }
        }

        .pop-over-header {
            width: 100%;
            height: 4rem;
            line-height: 4rem;
            background: $color-featured;
            color: $color-snow;
            position: relative;
            border-top-left-radius: 0.3rem;
            border-top-right-radius: 0.3rem;

            &:before {
                position: absolute;
                content: '';
                top: 0;
                bottom: 0;
                margin: auto;
            }

            .title {
                font-family: $font-title;
                font-size: 1.2rem;
                line-height: 4rem;
                text-transform: uppercase;
                text-align: center;
                margin: 0;
                color: $color-snow;
            }

            .close {
                position: absolute;
                display: block;
                top: 0;
                bottom: 0;
                margin: auto;
                font-size: 1.4rem;
                width: 1.4rem;
                height: 1.4rem;
                right: 1rem;
                cursor: pointer;
            }
        }

        .pop-over-main {
            padding: 2rem 2.5rem;
            border: 0.1rem solid $color-snow-extra-dark;
            border-top: 0;
            border-bottom: 0;
            min-width: 25rem;
            overflow: visible;
            border-bottom-left-radius: 0.3rem;
            border-bottom-right-radius: 0.3rem;

            &.float-footer {
                padding-bottom: 6rem;
                border-bottom: 0;
                overflow: auto;
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }
        }

        .pop-over-footer {
            width: 100%;
            height: 5rem;
            padding: 0 2rem;
            background: $color-snow-dark;
            border: 0.1rem solid $color-snow-extra-dark;
            border-bottom-left-radius: 0.3rem;
            border-bottom-right-radius: 0.3rem;
            border-top: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .cancel-link {
                color: darken($color-smoke-extra-dark, 20%);
                font-size: 1.2rem;
                font-weight: 600;
                text-decoration: none;

                &:hover {
                    color: $color-featured;
                }

                i {
                    font-size: 0.8rem;
                }
            }

            .buttons-container{
                flex-grow: 1;
                display: flex;
                padding-left: 1rem;
                justify-content: flex-end;
            }
        }

    }
}
