@import 'mixins';
@import 'vars';

.notifo {
    --color-background: #{$color-background-value};
    --color-border: #{$color-border-value};
    --color-button: #{$color-button-value};
    --color-control: #{$color-control-value};
    --color-empty: #{$color-empty-value};
    --color-error: #{$color-error-value};
    --color-input: #{$color-input-value};
    --color-seen-text: #{$color-seen-text-value};
    --color-seen: #{$color-seen-value};
    --color-link: #{$color-link-value};
    --color-scrollbar: #{$color-scrollbar-value};
    --color-shadow: #{$color-shadow-value};
    --color-success: #{$color-success-value};
    --color-text: #{$color-text-value};
    --font-size-lg: #{$font-size-lg-value};
    --font-size-md: #{$font-size-md-value};
    --font-size-sm: #{$font-size-sm-value};
    --font-size-ssm: #{$font-size-ssm-value};
    --font-family: #{$font-family-value};
    @import 'reset';
    @import 'components';
    @import 'notifications';
    @import 'topics';
    line-height: 1.5;

    .notifo {
        &-button {
            color: $color-button;

            & {
                position: relative;
            }

            svg {
                fill: $color-button;
            }

            &:hover {
                opacity: .8;
            }

            .notifo-seen-label {
                animation: fade-in .5s;
                background: $color-seen;
                border-radius: 10px;
                border: 0;
                color: $color-seen-text;
                display: inline-block;
                font-size: 10px;
                font-weight: bolder;
                line-height: 16px;
                padding-left: 5px;
                padding-right: 5px;
                position: absolute;
                right: -8px;
                top: -5px;
            }
        }

        &-modal {
            & {
                position: absolute;
                z-index: 10000;

                @media (0 <= width <= 600px) {
                    @include fixed(20px, 20px, 20px, 20px);

                    .notifo-modal-panel {
                        margin: 0 auto;
                        max-width: 100%;
                        max-height: 100%;
                    }
                }
            }

            &-panel {
                animation: fade-in .4s;
                background: $color-background;
                border: 1px solid $color-border;
                border-radius: 2px;
                box-shadow: 0 4px 4px $color-shadow;
                margin-top: 5px;
                max-width: 100%;
                max-height: 450px;
                overflow-x: hidden;
                overflow-y: auto;
                padding: .75rem 1.25rem 1.5rem;
                text-align: left;
                text-decoration: none;
                width: 450px;
            }

            &-right {
                right: 0;
            }

            &-top {
                @include fixed(10px, 0, null, 0);

                .notifo-modal-panel {
                    animation: slide-in .5s;
                    margin: 0;
                    margin-left: auto;
                    margin-right: auto;
                    max-width: 450px;
                    width: auto;
                }
            }

            &-inner {
                position: relative;
            }
        }

        &-powered {
            @include absolute(null, -1rem, -1.25rem);

            * {
                vertical-align: middle;
            }

            span {
                font-size: 80%;
            }

            &:hover {
                span {
                    text-decoration: underline;
                }
            }

            svg {
                margin-top: 4px;
            }
        }

        &-inner {
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
            width: 450px;

            .notifo-modal-panel {
                max-height: 100%;
            }
        }
    }
}

body {
    &.notifo {
        display: block;
        background: #efefef;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes slide-in {
    from {
        transform: translateY(-400px);
    }

    to {
        transform: translateY(0);
    }
}