@use 'sass:color';
@use '../../style/colors';

.notification.widget {
    // urgencies
    // &.urgency ...

    .icon {
        margin-right: 10px;
    }

    .time {
        margin: 3px;
    }

    .close-button {
        margin: 3px;
    }

    .title {
        font-weight: 800;
        font-size: 20px;
        margin-bottom: 5px;
    }

    .description {
        margin-bottom: 5px;
    }

    .actions {
        margin: 3px;

        // .action-button {}
    }

    .smooth-progress {
        min-height: 7px;
        margin: 3px;

        .background {
            background-color: color.adjust(colors.$window_bg_color, $lightness: -3%);
            border-radius: 3px;
        }

        .progress {
            background-color: colors.$accent-color;
            border-radius: 3px;
        }
    }
}

.notification-center {
    margin-top: 0;

    min-height: 700px;
    min-width: 580px;

    * {
        font-size: 16px;
    }

    .header {
        padding: 10px;
        margin-bottom: 9px;

        label {
            font-size: 22px;
        }
    }

    .notification-list-box {
        padding: 0 12px;

        .notification {
            box-shadow: none;
        }

        scrollbar {
            all: unset;
            border-radius: 8px;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;

            * {
                all: unset;
            }

            &:hover {
                border-radius: 8px;
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }

        scrollbar.vertical {
            transition: 200ms;
            background-color: rgba(23, 23, 23, 0.3);

            &:hover {
                background-color: rgba(23, 23, 23, 0.7);

                slider {
                    background-color: rgba(238, 238, 238, 0.7);
                    min-width: .6em;
                }
            }

            slider {
                background-color: rgba(238, 238, 238, 0.5);
                border-radius: 9px;
                min-width: .4em;
                min-height: 2em;
                transition: 200ms;
            }
        }
    }

    .placeholder {
        color: white;

        icon {
            font-size: 7em;
            text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
            -gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
        }

        label {
            font-size: 1.2em;
            text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
            -gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
        }
    }
}