.onboarding-notifications {
    margin-left: 10px;
    .notifications-icon {
        display: flex;
        @extend .clickable;
        .notifications-count {
            color: $white;
            font-size: 11px;
            text-align: center;
            width: 16px;
            height: 16px;
            background-color: $orange;
            border-radius: 50%;
            position: relative;
            right: 7px;
            top: -2px;
            &.hidden-count {
                background-color: transparent;
                color: transparent;
            }
        }
    }
    .onboarding-overlay {
        width: 520px;
        right: 39px;
        margin-top: 18px;
        .arrow-up {
            margin-left: 487px;
        }

        .user-notifications {
            .notifications-title {
                color: $blue;
                @extend .heading-5-semibold;
                @extend .text-uppercase !optional;
                padding: 13px 20px 10px 20px;
                border-bottom: 1px solid $tlv-light-gray;
            }
            .notifications-list {
                max-height: 600px;
                overflow-y: auto;
                .notification {
                    border-bottom: 1px solid $tlv-light-gray;
                    padding: 16px 20px 18px 20px;
                    display: flex;
                    &.unread {
                        background-color: lighten($gray, 38%);
                        .item-name {
                            display: flex;
                            @include base-font-bold;
                        }
                        .unread-circle-icon {
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            background-color: $blue;
                            align-self: center;
                            margin-bottom: 3px;
                            margin-left: 9px;
                        }
                    }
                    .notification-data {
                        width: 366px;
                        margin-right: 30px;
                        color: $dark-gray;
                        .item-name {
                            @extend .body-2-semibold;
                            @extend .text-uppercase !optional;
                            margin-bottom: 6px;
                        }
                        .flex-items {
                            display: flex;
                            margin: 6px 0 11px 0;
                            @extend .body-3;
                            line-height: 20px;
                            @extend .text-uppercase !optional;
                            color: $gray;
                            .separator {
                                border-left: 1px solid $dark-gray;
                                margin: 5px 8px;
                            }
                        }
                        .description {
                            @extend .body-3;
                            margin: 11px 0 8px 0;
                            .more-less {
                                font-size: $icon-font-size;
                                color: $blue;
                            }
                        }
                        .date {
                            font-size: $icon-font-size;
                            @include base-font-regular;
                            color: $gray;
                            margin-top: 8px;
                        }
                    }

                    .notification-action .action-button {
                        @extend .clickable;
                        width: 74px;
                        height: 28px;
                        color: $white;
                        background-color: $blue;
                        border-radius: 2px;
                        text-align: center;
                        line-height: 2;
                        margin-top: 4px;
                        &.active {
                            background-color: $action-button-active-bg;
                            border: solid 1px $action-button-active-border;
                        }
                        &:hover {
                            background-color: $action-button-hover-bg;
                            border: solid 1px $action-button-hover-border;
                        }
                    }
                }
            }
        }
    }
}