@use '../../styles/variables';
@use 'mixin';

.thy-notify-container > div {
    position: fixed;
    z-index: variables.$notify-z-index;
    top: variables.$notify-spacing;
    right: variables.$notify-spacing;

    .thy-notify {
        width: variables.$notify-width;
        padding: variables.$notify-padding;
        margin-bottom: variables.$notify-margin-bottom;
        position: relative;
        display: flex;
        border-radius: variables.$notify-border-radius-width;
        background: variables.$bg-panel;
        box-shadow: variables.$box-shadow;

        &-icon-container {
            position: relative;
            padding-right: variables.$notify-icon-padding-right;
            margin-top: 2px;
            .thy-icon {
                line-height: 1;
                font-size: variables.$notify-icon-font-size;
            }
        }

        &-close {
            position: absolute;
            right: variables.$notify-padding - 4;
            top: variables.$notify-padding;
            text-align: center;
            width: variables.$font-size-base * variables.$notify-line-height;
            font-size: variables.$font-size-base;
            color: variables.$notify-close-color;
            text-decoration: none;
            transition: color variables.$transition-duration-normal;
            &:hover {
                color: variables.$gray-600;
            }
        }

        &-main {
            flex: 1;
            .thy-notify-title {
                padding-right: variables.$font-size-base * variables.$notify-line-height;
                margin-top: 1px;
                font-size: variables.$font-size-base;
                color: variables.$notify-title-color;
                word-break: break-all;
            }
            .thy-notify-content {
                margin-top: 4px;
                .link-secondary {
                    font-size: variables.$font-size-base;
                    color: variables.$primary;
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
            .thy-notify-content,
            .thy-notify-detail {
                flex: 1;
                font-size: variables.$font-size-base;
                color: variables.$notify-content-color;
                word-break: break-all;
                &--extend {
                    -webkit-line-clamp: initial;
                }
            }
            .thy-notify-detail {
                white-space: pre-wrap;
            }
        }
    }

    @each $state, $color in variables.$notify-states {
        @include mixin.thy-notify-state($state, $color);
    }

    &.thy-notify-bottomRight {
        top: auto;
        bottom: variables.$notify-spacing;
        right: variables.$notify-spacing;
        left: auto;
    }
    &.thy-notify-bottomLeft {
        top: auto;
        bottom: variables.$notify-spacing;
        left: variables.$notify-spacing;
        right: auto;
    }
    &.thy-notify-topLeft {
        top: variables.$notify-spacing;
        bottom: auto;
        left: variables.$notify-spacing;
        right: auto;
    }
}
